Overview of using the font-face rule in CSS

Overview of using the font-face rule in CSS

The @font-face rule allows you to use custom fonts on your website by defining a new font family and specifying the location of the font files. You can use fonts that are hosted on your own server, as well as those that are hosted externally.

Here's the basic syntax for the @font-face rule:

In this example, we've defined a new font called "My Custom Font" and specified the src property with the locations of the woff2 and woff font files. We've also specified the font-weight and font-style as normal.

To use this custom font on your website, you can set the font-family property of an element to the name of your custom font:

In this example, we've applied the "My Custom Font" font to the body element. We've also included a fallback font of sans-serif in case the custom font can't be displayed for any reason.

It's important to note that different browsers support different font file formats. The @font-face rule allows you to specify multiple font file formats to ensure that your custom fonts are displayed correctly across different browsers. Here's an example of how you can specify multiple font file formats:

In this example, we've included woff2, woff, ttf, and eot font files to ensure that the custom font is displayed correctly across different browsers.

It's also worth noting that you can use the font-weight and font-style properties to specify the weight and style of your custom font. For example, you can use the following values for font-weight: 100, 200, 300, 400, 500, 600, 700, 800, 900. And you can use the following values for font-style: normal, italic, oblique.