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.