css
  1. css-font-face
PreviousNext

CSS @font-face

  • The @font-face rule in CSS allows you to define custom fonts and use them on your web pages.
  • This is especially useful if you want to use a non-standard font that isn't available on all computers.

Syntax

@font-face {
    font-family: 'Font Name';
    src: url('fontname.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
  • font-family: The name of the font family, which can be used to refer to the font in other places in your CSS file.
  • src: The location of the font file, including the file extension and format. You can also list multiple sources and formats to ensure compatibility across different browsers.
  • font-weight: The weight of the font, such as bold or normal.
  • font-style: The style of the font, such as italic or normal.

Example

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

@font-face {
    font-family: 'My Custom Font';
    src: url('myfont.woff') format('woff'),
         url('myfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
Try Playground

In this example, we define a custom font called "My Custom Font" and provide the location of the font files in the src property. We also specify that the font-weight and font-style are normal.

Explanation

The @font-face rule allows web designers to use custom fonts that are not installed on the user's computer. The rule defines the name of the font family, the location of the font file, and its style and weight.

Use

The @font-face rule is commonly used to incorporate custom fonts into web designs. It ensures that the designer's intended font displays correctly on all devices that visit the site, regardless of the user's pre-installed fonts.

Important Points

  • The @font-face rule is supported on most modern browsers, but some older browsers may not support it fully. It's recommended to use multiple font formats to ensure maximum compatibility.
  • Always check the font licenses before using them on your website. Some fonts require a license, which must be obtained before use.

Summary

The @font-face rule is a powerful CSS tool that allows you to use custom fonts on your website. It's a great way to add unique style to your website, ensuring that it stands out from others that use generic fonts. By understanding the syntax and usage of this rule, you can make sure that your website looks exactly as you want it to.

TransitionOpacity
Published on: