CSS | font-display property

While using web fonts, the text will be invisible until either web font is loaded or three seconds are passed, at which point the fallback font is used.

Font-display allows customizing how web fonts are displayed when the page is being rendered.

It is applied using @font-face rule which defines custom fonts in a style sheet.

Syntax:

@font-face {
  font-family: Sample;
  src: url(samplefont.woff) format('woff'),
       url(samplefontbold.woff) format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: optional;
}

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>CSS | font-display</title>
    <meta name='viewport' content="width=device-width, initial-scale=1">
    <style>
        @font-face {
        font-family: Roboto;
        src: url(Roboto\Roboto-BoldItalic.ttf) format('truetype');
        font-style: italic;
        font-weight: bold;
        font-display: block;
    }
  
    div{
        font-family: Roboto;
        font-style: italic;
        font-weight:bold;
    }
</style>
</head>
<body>
<h1>Usage of font-display</h1>
<div>Downloaded font</div>
<p>Normal font</p>
</body>
</html>

chevron_right


Output:

The downloaded font appears after a short span. Try running it on IDE to see it.

The font-display property timeline is divided into three periods:

  • Block
  • Swap
  • Failure

Block Period:The text will be invisible till web font hasn’t loaded, rendering is blocked in this period.

Swap Period:Originally the fallback font is used to render text, if web font is successfully loaded during the swap period, the fallback font is swapped with the web font.

Failure Period:At this point it is considered that loading is failed and the fallback font is to be used.

This property accepts the following values:

  • Auto (Initial value): At this value, the font-display technique is chosen by the browser. This is usually similar to Block value.
  • Block: It goes for a small block period and then goes into an infinite swap period so the rendering is allowed infinitely. In simpler form, it hides the text until web font is loaded.
  • Swap: At this value, the font-face is provided with minimal block period and an infinite swap period. It uses fallback font until web font is loaded
  • Fallback: It gives the font-face a minimal block period(100 ms) and a small swap period(about 3 seconds). It tries to load web font for a short period then goes into failure period and uses fallback font.
  • Optional: It gives the font-face a minimal block period and no swap period. It hides the text for a short time and then uses fallback font until web font is the custom font is available to use.
My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.