Skip to content
Related Articles

Related Articles

Improve Article
CSS | font-display property
  • Last Updated : 07 May, 2020

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:






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

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
Recommended Articles
Page :