User Guide Cancel

Customize web font performance with font-display settings

  1. Adobe Fonts User Guide
  2. Introduction
    1. System and subscription requirements
    2. Browser and OS support
    3. Activate fonts on your computer
    4. Add fonts to your website
    5. Activate 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: Activating fonts
    12. Active fonts aren't added to font menu
    13. "Unable to activate 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

Learn how to use font-display settings to modify web font performance.

The font-display setting allows you to specify how web fonts are loaded in the web browser and applied to your website. There are five font-display options:

Font-display value 

Behavior 

Auto

Allows the browser to use its default method to load the font.

Block

Hides the text on your website until the web font has downloaded. Your website visitors may see a Flash of invisible text or FOIT with this option.

Swap

Shows the fallback font that you have set in the CSS until the web font has downloaded. Your website visitors may see a Flash of unstyled text  or FOUT with this option.  

Fallback

Uses the block behavior for a short period, then switch to the swap behavior and apply the fallback font to the text. If the Web Fonts have not loaded by the end of the swap period, the fallback font remains in use. 

Optional

Uses the block behavior for a short period, then apply the fallback font to the text. The value gives the web browser the option of not downloading the web font at all, for example, if the website visitor is on a slow Internet connection. 

For technical details on font-display and the supported values, refer to the CSS Fonts Module Level 4 specification.

Note:

By default, web font projects are created with font-display set to auto.

To customize the font-display setting, follow the below steps:

  1. In your web projects page, click  Edit Project.

    Edit project
    Edit Project

  2. Select any of the following font-display values from the sidebar. By default, the font-display setting of web font projects is set to auto.  

    font display settings

  3. Click Save Changes and the font-display value is applied to your website within minutes.

The new font-display setting is automatically included in your website as part of the existing embed code.

Update existing web projects

Support for font-display was added to Adobe’s web font loading in September 2020. Web projects created before September 2020 have been updated to use the default font-display: auto behavior. 

The font-display setting for any existing project can be changed by following the above steps. Once you save the changes, the new font-display setting will be included in your website as part of the existing embed code. You do not need to make changes to the website itself. 

Adobe logo

Sign in to your account