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 Orders under Your Account.
To download the web fonts you have purchased, click on the View Receipt for the required web font.
OR on under Your Account click on Manage Web Fonts. 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:
- Fonts: these folders contain the fonts for all supported web browsers (WOFF, WOFF2).
- Eulas: these folder contain the End user license agreement pdf file.
- demo-async.css: an example CSS file that corresponds to demo-async.htm and contains the font definitions.
- demo.css: an example CSS file that corresponds to demo.htm and contains the font definitions.
- demo.htm: an example HTML file that uses the @import method for page tracking.
- mtiFontTrackingCode.js: a JS file that corresponds to demo.htm and contains required javascript scripts.
An empty CSS file is accessed on the fonts.com servers in order to track pageviews. There are two different technical options available to you:
- @import method: demo.css and demo.htm The tracking CSS file is activated by the @import tag in the font CSS file. You need only link the demo.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 fonts.com servers will be unable to respond rapidly enough, use the alternative asynchronous method.
- 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 mtiFontTrackingCode.js. 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.
In order to use the fonts for which you have acquired a license on your web pages, proceed as follows:
- Copy the “Fonts” folder to your web server.
- 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.
- Assign the corresponding HTML tags to the fonts in your CSS file. You will find examples to help you in the relevant demo files.
- Follow the instructions for the configuration of your web server.
On the Page View Stats 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.
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.