CODESCRACKER

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 used. For example:

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

Note: The SVG font format is only supported by Safari 3.2 and newer versions.

Note: The EOT font format is only supported by Internet Explorer or Edge 6.2 and newer versions.

Note: Use lowercase letters as the 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 is the list of font properties that we can include in @font-face.

Note: The default values of font-stretch, font-style, and font-weight are normal.

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

CSS @font-face example

Consider the following code as an example demonstrating the @font-face in CSS:

<!DOCTYPE html>
<html>
<head>
   <style>
      /* Define the font using @font-face */
      @font-face {
         font-family: 'CustomFont';
         src: url('fonts/CustomFont.ttf');
         font-weight: normal;
         font-style: normal;
      }

      /* Use the custom font in a selector */
      h1 {
         font-family: 'CustomFont', sans-serif;
         font-size: 3rem;
         color: #333;
         text-align: center;
      }
   </style>
</head>
<body>

   <!-- Use the custom font in an h1 element -->
   <h1>Hello there!</h1>
   
</body>
</html>

The output that this example produces is shown in the snapshot given below:

css font face example program

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!