CSS @font-face

The @font-face rule in CSS allows you to use custom fonts on your web pages. This means that you are not limited to using only the fonts that are installed on the user's computer, but you can include any font you want to be displayed. You can use fonts from sites like Google Fonts or even your own custom fonts.

Using the @font-face rule involves three main steps:

  1. Define the font in your CSS
  2. Specify the font-family
  3. Use the font in your CSS styles

1. Define the font in your CSS

To define a custom font in your CSS, you need to use the @font-face rule. This rule specifies a set of fonts to be used for an element and gives it a name that you can use in your CSS styles.

Here's an example of defining a custom font using the @font-face rule:

Result: 

    @font-face {
      font-family: 'CustomFont';
      src: url('customfont.woff') format('woff'),
           url('customfont.ttf') format('truetype');
    }

2. Specify the font-family

After defining the custom font, you need to specify the font-family property in your CSS styles to use the custom font. The value of font-family should be the same as the name you gave in the @font-face rule.

Here's an example of specifying the font-family property:

Result: 

    body {
      font-family: 'CustomFont', sans-serif;
    }

3. Use the font in your CSS styles

Once you have defined the custom font and specified the font-family property, you can now use the custom font in your CSS styles like you would with any other font.

Here's an example of using the custom font in a CSS style:

Result: 

    h1 {
      font-family: 'CustomFont', sans-serif;
    }

With these three steps, you can now use custom fonts in your web pages using the @font-face rule in CSS.