CSS font-family Property

CSS font-display property

Last Updated : 10 Oct, 2024

The CSS font-display property controls how a custom web font is displayed while it's loading. It determines whether to show a fallback font, hide text temporarily, or swap to the custom font once it's fully loaded.

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: In this example we demonstrates the usage of the @font-face rule to import the "Roboto" font with bold and italic styles, utilizing the font-display property to control loading behavior.

html

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

CSS font-family Property

J

jnikita356

Improve

Article Tags :

Similar Reads

CSS Display Property

The CSS display property specifies an element's display behaviour (the type of rendering box). It defines how an element is rendered in the layout, determining its positioning and interaction within the document's flow and structure.Syntax display: value;Try CSS Display Property #iframe{ height:550p

CSS font-family Property

The CSS font-family property specifies the font for an element. It can list multiple fonts as fallbacks. If the browser doesn't support the first font, it tries the next. It includes specific font names like "Arial" and generic families like "serif" or "sans-serif".Types of Font Familyfamily-name: S

CSS font-size Property

The font-size property in CSS is used to specify the size of the text. It can be set using different units like pixels, em, rem, percentages, and more, making it flexible for responsive designs. Font size plays a key role in readability, improving the user experience, and maintaining the overall aes

CSS font-style Property

The CSS font-style property is used to style text in a normal, italic, or oblique face from its font family. This property helps to assign importance and decorate specific text, enhancing the overall user experience. The font-style property is an essential tool in CSS for designing and styling text

CSS font-weight Property

The CSS font-weight property is used to set the weight or thickness of the font used with HTML text. The font-weight applied will depend on the font family used and the browser. Some font families are available only in specific weights. Understanding how to use the font-weight property effectively c

CSS font-variant Property

The font-variant property is used to convert all lowercase letters into uppercase letters. However, the converted upper letters appear too small compared to the original uppercase letters. Syntax: font-variant: normal|small-caps|initial; Default Value: normal Property Values:normal: It has a default

CSS font-kerning Property

This property is used to control the usage of the Kerning Information that has been stored in the Font. Kerning defines how letters are spaced. This property will have no visible effect on those fonts that do not have kerning information.Syntax: font-kerning: auto|normal|none;Default Value: auto Pro

HTML DOM Style display Property

The HTML DOM Style display property is used to set or return the display type of an element. It is similar to the visibility property, which displays or hides the element. With a slight difference in display: none, hiding the entire element, while visibility: hidden meaning only the contents of the

CSS font-stretch Property

The font-stretch property in CSS is used to set the text wider or narrower. This property is not working any font. Its only work when font family has a width-variant face. Syntax: font-stretch: normal|ultra-condensed|extra-condensed|condensed| semi-condensed|semi-expanded|expanded|extra-expanded|ult

CSS font-synthesis Property

The font-synthesis property controls the synthesis of the missing type style such as bold, italic, or underline by the browser. Different font languages like Chinese and Japanese do not include these font variants so synthesizing them may hinder the legibility of the text so the default browser synt