Troubleshooting guide: Adding fonts to a website

Embed code is missing from site.

Add the embed code to your site.

You've minified the embed code into a file on your own server.

Minification is not allowed under the Terms of Use, and prevents the fonts from loading correctly.

Exclude the embed code from your CSS and JavaScript file compressors, and update your website to use the embed code as provided.

The correct font-family name hasn't been added to the CSS.

Add the font-family names provided to your CSS. The CSS selectors help page shows how to find the font-family name for each of the web fonts you're using.

A browser extension is blocking the web font files.

Turn off the browser extension or change its settings to allow web fonts from Adobe (previously called Typekit).

The browser isn't supported.

Browser and OS support

The correct font weight or style isn't specified in the CSS.

Add the weight or style to the web project and make sure it is specified correctly in the CSS.

Downloadable fonts turned off in hidden preference.

Another hidden preference disables downloadable fonts.

1. Open a new browser tab and type about:config in the address bar.
2. Enter gfx.downloadable_fonts.enabled in the search field.
3. Set the value to true. To change it, double-click the preference row.

Browser preference to override user fonts is turned off.

A preference determines whether custom fonts may override the user's browser settings. Under Languages and Appearance > Fonts & Colors > Advanced, select the Allow pages to choose their own fonts option.

Document mode is set to an older version of the browser [IE9 or higher].

Using a different document mode results in the wrong font file format being served to the browser.

Remove meta tags that tell Internet Explorer to use a different document mode, such as

<meta http-equiv="X-UA-Compatible" content="IE=8">

Browser preference to disable downloaded fonts is turned on [IE8].

A security setting can disable all downloadable fonts. Under Tools > Internet Options > Security > Custom level > Downloads, look for Font Download. Enable font downloads with the default security level. If security has been set to "high," fonts may not load.

Document mode is set to an older version of the browser.

Using a different document mode results in the wrong font file format being served to the browser, and can cause all the text to be set in italics.

Remove meta tags that tell Internet Explorer to use a different document mode, such as

<meta http-equiv="X-UA-Compatible" content="IE=8">

The font weight or style used in the CSS isn't included in the web project.

Add the weight or style to the project and make sure it is specified correctly in the CSS.