Troubleshooting guide: Adding fonts to a website

What are you having trouble with?

Obs!

Adobe Fonts is not compatible with XP, Windows 7, Windows Vista, and Mac OSX.

Fonts aren't working in any browser

Problem

Solution

Embed code is missing from 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).

Fonts aren't working in mobile browsers

Problem

Solution

The browser isn't supported.

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.

Firefox isn’t showing the fonts but other browsers are

Problem

Solution

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.

Internet Explorer isn’t showing the fonts but other browsers are

Problem

Solution

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.

All text is italicized in Internet Explorer

Problem

Solution

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">


 

Fonts aren't displaying or look “doubled” in Safari and Mobile Safari

Problem

Solution

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.

Få hjälp snabbare och enklare

Ny användare?