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.
