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:
||Allows the browser to use its default method to load the font.
||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.
||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.
||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.
||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.
By default, web font projects are created with font-display set to auto.
The new font-display setting is automatically included in your website as part of the existing embed code.
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.