How to install Webfonts
Once payment has been received, you will be able to access the site with your order history, which can be found in your user account under Web fonts.
To download the web fonts you have purchased, click either on the download link for the required web font or on the Download all web fonts link. This brings you to the Web Font Kit Builder, where you can select the language version of the web font and download it as a Web Font Kit for installation on your website.
The kit contains not only the web fonts, for which you have purchased a license, but also the tracing code to integrate the page views and a CSS file with the font definitions for use on websites. You now have everything you need to integrate the web fonts quickly and easily into your website.
The Web Font Kit contains the following files:
- This folder contains different folders named with number and within these folders contain the fonts for all supported web browsers (WOFF2 and WOFF formats).
- Fonts: This folder contains different folders named with number and within these folders contain the fonts for all supported web browsers (WOFF2 and WOFF formats).
- demo.htm: an example HTML file that contains guidelines for using CSS-only and JavaScript method in 2 different tabs as shown in below screenshot.
- demo.css: an example CSS file that corresponds to CSS-only publish code and contains the font definitions.
- demo-async.css: an example CSS file that corresponds to JavaScript method and contains the font definitions.
- mtiFontTrackingCode.js: This file contains compressed JavaScript code which will append Monotype tracking code 1.css in the webpage document asynchronously. It will be used only when JavaScript method is used.
- Eulas: This folder contains the required End User License Agreements for the fonts added in the kit.
An empty CSS file is accessed on the Linotype.com servers in order to track pageviews. There are two different technical options available to you:
In order to use the fonts for which you have acquired a license on your web pages, proceed as follows:
On the Web Fonts Statistics view you can see how many page views of your licensed fonts have been used. Fonts are represented in red to inform you immediately that these page views have been almost depleted and that these fonts must be relicensed.
1) | @import method: demo.css The tracking CSS file is activated by the @import tag in the font CSS file. You need only link the tracking CSS file to your web pages. In the case of this direct method, page display commences only when the tracking CSS file is itself loaded. If you are concerned that the Linotype.com servers will be unable to respond rapidly enough, use the alternative asynchronous method. |
2) | Asynchronous JavaScript method: demo-async.css In this case, the tracking CSS file is activated by a brief JavaScript code. You will need to link to your pages not only the demo-async.css file but also the corresponding JavaScript code from JavaScript tab of demo.htm file. In this asynchronous system, the tracking CSS file is activated by JavaScript at the same time as the page is loading. There is thus no holdup when it comes to page display. |
1) | Copy the “Fonts” folder to your web server. |
2) | Decide which version of pageview tracking you would like to use and link the corresponding CSS file (and JavaScript code if necessary) to your pages. |
3) | Assign the corresponding HTML tags to the fonts in your CSS file. You will find examples to help you in the relevant demo files. |
4) | Follow the instructions for the configuration of your web server. |
Web server configuration and safeguarding of the fonts
So that your web server delivers the web fonts correctly, it may be necessary to adjust the configuration.
Each environment may require you to configure the server in such a way that an access-control-allow-origin header is transmitted. Further information can be found on the Mozilla Developer Network and W3C Cross-Origin Resource Sharing
In standard configuration on several web servers, in particular the IIS, the assignment of the appropriate MIME types is missing for some or all web fonts, so that these must be added. We recommend that you deliver all web fonts with the MIME type application/octet-stream. In this way you will obtain the optimum compatibility with the various browsers.
The license provisions oblige you to take appropriate security measures to prevent improper use of your web fonts. The cryptic font names form part of these security measures and therefore they must be preserved. In the example files, these names are correctly referenced. Moreover, the web server must be configured in such a way that the web fonts cannot be easily downloaded via the input of a URL in the browser or a wget command. This is known as hotlink protection. In addition, you must ensure that the fonts cannot be linked by third party web pages.
So that your web server delivers the web fonts correctly, it may be necessary to adjust the configuration.
Each environment may require you to configure the server in such a way that an access-control-allow-origin header is transmitted. Further information can be found on the Mozilla Developer Network and W3C Cross-Origin Resource Sharing
In standard configuration on several web servers, in particular the IIS, the assignment of the appropriate MIME types is missing for some or all web fonts, so that these must be added. We recommend that you deliver all web fonts with the MIME type application/octet-stream. In this way you will obtain the optimum compatibility with the various browsers.
The license provisions oblige you to take appropriate security measures to prevent improper use of your web fonts. The cryptic font names form part of these security measures and therefore they must be preserved. In the example files, these names are correctly referenced. Moreover, the web server must be configured in such a way that the web fonts cannot be easily downloaded via the input of a URL in the browser or a wget command. This is known as hotlink protection. In addition, you must ensure that the fonts cannot be linked by third party web pages.