CSS @font-face

The CSS @font-face is used when we need to use custom fonts for our web application. For this, put the font file on the server, and include the font file URL and the name of the font to be use. For example:

@font-face {
   font-family: FontName;
   src: url(FontFileURL);
}

Note - The SVG font format only supports by the Safari 3.2 and newer versions.

Note - The EOT font format only supports by the Internet Explorer or Edge 6.2 and newer versions.

Note - Use lowercase letters as font URL to avoid unexpected results produced by the Internet Explorer browser.

CSS @font-face Syntax

The syntax of @font-face in CSS, is:

@font-face {fontProperty: value; fontProperty: value; ...}

Here are the list of font properties that we can include in @font-face

• font-family - used to define the font-family for the text, to make the text looks/appears more interactive
• font-stretch - used to define condensed or expanded face from a font
• font-style - used to style the font of text
• font-weight - used to make the text thicker or thinner
• src - used to define the URL/path of the font file, using url() function
• unicode-range - used to define the range of unicode characters the font will supports. The default value is U+0-10FFFF

Note - The default value of font-stretch, font-style, and font-weight is normal.

Note - From all the above properties, the font-family and src are required.

CSS Online Test