User Guide Cancel

Troubleshooting guide: Adding fonts to a website

Search
Fonts

Fonts

Open app
  1. Adobe Fonts User Guide
  2. Introduction
    1. System and subscription requirements
    2. Browser and OS support
    3. Add fonts on your computer
    4. Add fonts to your website
    5. Add fonts on CC Mobile
  3. Font licensing
    1. Font licensing
    2. Manage your account
    3. Licensing for Creative Cloud for enterprise customers
    4. Adding font licenses to your account
    5. Removing fonts from the subscription library
    6. Adobe Fonts not available to Adobe IDs registered in China
    7. Why aren't these fonts included in my Creative Cloud subscription?
    8. Morisawa font removal September 2021
  4. Getting and using fonts
    1. Using Adobe Fonts in Creative Cloud apps
    2. Manage your fonts
    3. Resolve missing fonts in desktop applications
    4. Using fonts in InDesign
    5. Fonts and typography
    6. Using web fonts in HTML5 Canvas documents
    7. Using fonts in InCopy
    8. How to use fonts in Adobe Muse
    9. Using web fonts in Muse
    10. Packaging font files
    11. Troubleshooting guide: Adding fonts
    12. Added fonts aren't showing to font menu
    13. "Unable to add one or more fonts" or "A font with the same name is already installed"
    14. What happens when a font I'm using is updated by the foundry?
  5. Web design and development
    1. Add fonts to your website
    2. Troubleshooting guide: Adding fonts to a website
    3. Using web fonts in HTML email or newsletters
    4. Using web fonts with Accelerated Mobile Pages (AMP)
    5. CSS selectors
    6. Customize web font performance with font-display settings
    7. Embed codes
    8. Dynamic subsetting & web font serving
    9. Font events
    10. Why are my web fonts from use.typekit.net?
    11. Site can't connect to use.typekit.net
    12. Using web fonts with CodePen
    13. Browser and OS support
    14. Domains
    15. Using web fonts when developing locally
    16. Content security policy
    17. Printing web fonts
  6. Language support and OpenType features
    1. Language support and subsetting
    2. Using OpenType features
    3. Syntax for OpenType features in CSS
  7. Font technology
    1. OpenType-SVG color fonts
    2. Ten Mincho: important points on updating from Version 1.000

What are you having trouble with?

Fonts aren't working in any browser

Problem

Solution

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).

Fonts aren't working in mobile browsers

Problem

Solution

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.

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.

 Adobe

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans

Legal Notices    |    Online Privacy Policy