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

Spread the love

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 add the fonts with the @font-face rule.

We add the fonts by setting the src property to the font URL.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

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