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