How to use .otf fonts on web browsers with CSS?

Spread the love

Sometimes, we want to use .otf fonts on web browsers with CSS.

In this article, we’ll look at how to use .otf fonts on web browsers with CSS.

How to use .otf fonts on web browsers with CSS?

To use .otf fonts on web browsers with CSS, we use the @font-face rule.

For instance, we write

@font-face {
  font-family: GraublauWeb;
  src: url("path/GraublauWeb.otf") format("opentype");
}

@font-face {
  font-family: GraublauWeb;
  font-weight: bold;
  src: url("path/GraublauWebBold.otf") format("opentype");
}

to use the @font-face rule to add the GraublauWeb font.

We set font-family to the font’s name.

And we set src to the URL with the font.

We specify the font’s format with format.

Conclusion

To use .otf fonts on web browsers with CSS, we use the @font-face rule.

Leave a Reply

Your email address will not be published. Required fields are marked *