https://www.myfonts.com/pages/closure-announcement-faq

Skip to main content

  • Facebook
  • Twitter
  • Email
All
  • Home
  • Support
  • Fonts.com FAQs
  • How do I self-host my Web Fonts?
  • Shopping on Fonts.com
  • Fonts.com Billing
  • SkyFonts
  • App, E-Book, Digital Ad, & Server Licensing
  • Monotype Library Subscription
  • Desktop Fonts
  • Subscription
  • Web Fonts

 

 

How do I self-host my Web Fonts?

 

First, download your project's self-hosting kit from the "Publish Options" section of the project. It will be in the third tab labeled "Option 3: Self-hosted".

The downloaded kit contains the following files and folders:

  • Fonts/ – This folder contains each of the fonts in your project in the WOFF, and WOFF2 formats
  • demo.htm – This is a sample HTML file for your fonts with the @import page-view tracking method
  • demo.css – This is a sample CSS file to accompany the demo.html file; it can be used to replace the STYLE tag with the @font-face rules with a LINK tag
  • demo-async.htm – This is a sample HTML file for your fonts with an asynchronous JavaScript page-view tracking method
  • demo-async.css – This is a sample CSS file to accompany the demo-async.html file; it can be used to replace the STYLE tag with the @font-face rules with a LINK tag

Both page-view tracking methods work by making a request to an empty CSS file on our CDN when the visitor's browser loads the page; the difference is in how that request is executed. With the sample HTML files, please be sure to read the contained information. Hosting our Web fonts on your own servers requires that you place reasonable security measures on them to prevent improper use. This generally includes the following:

  1. Keep the web font file names obfuscated (as they are provided, the provided sample CSS maps all the fonts to the correct files)
  2. Implement measures so that visitors may not easily download the web font files by simply typing the font file's URL into their browser (or by something like a basic wget command)
  3. Implement measures to that other web sites cannot "hot-link" to the font files hosted on your servers

Next, choose your page-view tracking method (CSS @import or asynchronous JavaScript) and upload the appropriate files as well as the fonts to your server. Be advised that uploading the Fonts folder to a location other than that referenced in the HTML/CSS will require that you adjust the paths in the CSS @font-face rules to match.

Finally, take any final steps that may be necessary for your server configuration to properly deliver the hosted font files to your site. This will often include configuring your server in these two areas:

Cross-Origin Resource Sharing policies

Depending on your setup, you may need to configure your server to include a valid "access-control-allow-origin" response header to ensure the web fonts work correctly in certain browsers. More information can be viewed at these links:

Mozilla Developer Network

W3C Cross-Origin Resource Sharing

Configuring MIME Types

Some environments, commonly IIS-based, will not have MIME types configured for some or all of the web font file formats pre-configured and they will have to be manually added to the configuration. We recommend delivering each web font file format with the MIME type "application/octet-stream" to ensure compatibility with all possible browsers.