What Is @font-face In CSS 2023

By XiaoXin
A Bit Randomly

Node.js supports scalability through its event-driven, non-blocking I/O model and its ability to efficiently handle a large number of concurrent connections. The event-driven, non-blocking I/O model in Node.js allows it to... Read How Does Node.js Support Scalability?

Main Contents

What Is @font-face In CSS

The @font-face at-rule in CSS allows you to import custom fonts and use them in your styles. This can be useful if you want to use a specific font that is not widely available, or if you want to have more control over the appearance of your text. The @font-face rule specifies the font-name and the location of the font file, and once the font has been imported, you can use it in your styles by referencing its font-name.

@font-face {
  font-family: "Trickster";
  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
}

@font-face rule that imports a custom font named "Trickster". The font is specified as a local font, with the local("Trickster") property. The src property specifies the location of the font file, which is provided in multiple formats (opentype, woff) to ensure compatibility with different browsers. The tech(color-COLRv1) property specifies that the font uses the color-COLRv1 font technology, which allows the font to display multiple colors within a single glyph. This allows for more dynamic and versatile text styling. Once this font-face rule is added to your styles, you can use the "Trickster" font in your CSS by referencing its font-name.

Please Share This Article Thank You!

Parts of CSS @At-Rules Explanation
What Is @font-feature-values In CSS

The @font-feature-values at-rule in CSS allows you to define custom values for font features, such as ligatures or kerning, and use them in your styles. This can be useful if you want to use the same font-feature property ...

What Is @counter-style In CSS

The @counter-style at-rule in CSS allows you to define custom counter styles, which control the appearance of counter elements in your document. A counter style consists of several components, including a name, algorithm, ...