How to install Webfonts
- 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.
| 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. |
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.