🎯 What is @font-face?

The CSS @font-face rule allows you to use custom fonts on your website even if they are not installed on the user’s device.

Normally, a font must be installed on the user’s computer to be used. However, with @font-face, font files are uploaded to your server and automatically downloaded by the browser.

In short: You can use fonts that are not installed on the user's device.

Defines the name of the font. You will use this name in your CSS.

font-family: "MyCustomFont";

Specifies the path of the font file. The browser downloads the font from this location.

src: url("fonts/myfont.woff2");

Uses the font if it already exists on the user’s device; otherwise, it downloads it from the server.

Defines whether the font is normal, italic, etc.

Specifies the thickness of the font (400, 700, bold, etc.).

Different browsers support different font formats, so multiple formats are used for compatibility.

• EOT → Internet Explorer, old Edge
• WOFF2 → Modern browsers (Chrome, Firefox, Opera)
• WOFF → All modern browsers
• TTF / OTF → General support
• SVG → Older iOS / Safari versions

That’s why multiple formats are defined inside @font-face.

For example, if you want to use a font called “HandwrittenFont”:

@font-face {
  font-family: "HandwrittenFont";
  src: url("fonts/handwritten.woff2") format("woff2"),
       url("fonts/handwritten.woff") format("woff"),
       url("fonts/handwritten.ttf") format("truetype");
}
                

Then you can use it like this:

h1 {
  font-family: "HandwrittenFont";
}
                

The browser downloads the best supported format automatically and applies the font.

• The font is uploaded to the server.
• The browser checks available formats.
• The best supported format is downloaded.
• The font is applied to the text.