CSS Web Fonts

CSS Web Fonts, also known as @font-face in CSS, enable web designers to specify custom fonts to be used on web pages. Prior to the @font-face rule, web designers were limited to a small selection of "web-safe" fonts that were installed on most computers.

With CSS Web Fonts, designers can now use virtually any font they desire, as long as they have the appropriate licensing rights or the font is freely available. The @font-face rule allows web designers to specify a font file to be downloaded along with the rest of the web page's assets. This font file can be in various formats such as TrueType (TTF), OpenType (OTF), or Web Open Font Format (WOFF/WOFF2).

Here's a basic example of how @font-face rule is used in CSS:

Example

@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2'),
       url('mycustomfont.woff') format('woff');
}

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

You can click on above box to edit the code and run again.

Output

In this example, the custom font 'MyCustomFont' is defined using @font-face, and then it's used as the font-family for the body element. If the user's browser supports the WOFF2 format, it will use the 'mycustomfont.woff2' file; otherwise, it will fall back to 'mycustomfont.woff'.

Using CSS Web Fonts gives web designers more flexibility and creativity in their designs, allowing them to use unique and visually appealing typography on their websites.