How to use @font-face in CSS

Wed-Mar-2023
1,993

@font-face is a CSS rule that allows you to define custom fonts for your web pages. Here are the steps to use @font-face in CSS:

  1. Choose the font you want to use and make sure you have the necessary font files. The font files must be in TrueType (.ttf), OpenType (.otf), or Web Open Font Format (.woff or .woff2) format.
  2. Upload the font files to your web server or use a CDN to host them.
  3. Define a new font family using @font-face. For example:
css
@font-face {
font-family: 'MyCustomFont';
src: url('path/to/mycustomfont.woff2') format('woff2'),
url('path/to/mycustomfont.woff') format('woff'),
url('path/to/mycustomfont.ttf') format('truetype');
}

The font-family property specifies the name of the font family, which can be any name you choose. The src property specifies the location of the font files, along with the format of each file.

  1. Use the newly defined font family in your CSS rules. For example:
css
body {
font-family: 'MyCustomFont', sans-serif;
}

In this example, the font-family property is set to MyCustomFont, which is the name of the font family defined in step 3. If the custom font fails to load, the browser will fallback to the sans-serif font family.

That’s it! With these steps, you can use @font-face to add custom fonts to your web pages.