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 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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...