This article explains how to host Monotype web fonts and monitor their usage using the Monotype Fonts.
After adding your fonts to web projects and digital ads and optimizing them for performance using subsetting options, they’re ready to be deployed.
The sections below describe how to download approved web fonts, host them on your own infrastructure, and ensure usage is correctly reported.
When you self‑host Monotype web fonts, you are responsible for:
Downloading font files from an approved web fonts project
Hosting those files on your web server or Content Delivery Network (CDN)
Embedding the provided CSS so fonts load correctly
Allowing usage data to be reported for licensing and compliance
Usage reporting is required to confirm that fonts are used according to your license terms.
Hosting web fonts using Monotype’s CDN service
Monotype’s hosted web fonts service serves fonts from our CDN to ensure fast font delivery, no matter where your visitors are located. To host your web fonts using Monotype’s service:
Click on your web project to open it in the main view on the right.
At the top of the fonts list, click on the Embed code button.
From the Web project embed codes dialog, you can choose to include your fonts in your web application using CSS.
Click Copy to copy the CSS code snippet.
Paste this code snippet within the <head> section of your HTML file to use the fonts from this web page.
Note: This script is used to download the web project from the CDN at runtime and track usage.
From the Font style CSS section of the Web project embed codes dialog, select a font style from the drop-down menu to generate font-family, font-style & font-stretch style codes for use in your website’s CSS. Click on the Copy button to copy these.
Repeat the above step for all the styles that you’d like to include in your CSS.
Note: We’ve introduced a new generation of web font and digital ad hosting services. This means we have sunsetted the old technology, restricting what you can do with old web projects and digital ads. Here is a link to more details on this transition.
Self-hosting web fonts
Note: This feature is only available to customers who are signed up for the Enterprise plan. Contact [email protected] for additional queries.
You can also download self-hosting kits for your web projects to serve your fonts from your own servers. Use the steps below to download the self-hosting web kit.
Click Download Kit.
Extract the downloaded zip file. For example, the WebFonts_<your web project name-uniqueID>.zip file.
Upload the fonts from this downloaded folder to your servers. This folder contains WOFF (.woff) and WOFF2 (.woff2) versions of each style in your web project. For example,
The downloaded self-hosting kit also contains the following:
Sample Web Fonts implementation
It includes startHere.html file and startherefiles folder
Open the startHere.html file to view:
Implementation guidelines for your web fonts, including the sample CSS.
Some basic troubleshooting steps in case you encounter any issues using the web fonts.
A highlight section to view rendering of web fonts in different point sizes using a waterfall model.
WebProject CSS
File: <Unique WebProject Id>.css
This is the recommended CSS that you should use in your website along with the web fonts. It is configured for optimal performance while downloading the web fonts for rendering.
It also contains a link to our tracking css "1.css" at the top, which is tied to the web project created on Monotype Fonts.
This CSS tracks web font usage and pushes that usage data back to Monotype Fonts for reporting and licensing purposes.
Monitoring font usage and reporting
Web font usage is reported as the number of page views for web projects and impressions for digital ads.
As a company admin, you can easily monitor font usage by clicking on the Reports button below the name of a web project/digital ad in the main view, as shown below:
Click here to learn more about monitoring font usage and reporting.
Important information:
The page views/impressions number is based on the page views for an entire web project or digital ad. For example, if your web project contains 10 fonts and is used on a web page that receives one page view, your report will show one page view, not 10.
In case of overages, Monotype will not turn off its hosted service or send an invoice for overages. However, we may reach out to you if your consumption greatly exceeds the allowance.