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.