How to add some non-standard font to a website with CSS?

Spread the love

Sometimes, we want to add some non-standard font to a website with CSS.

In this article, we’ll look at how to add some non-standard font to a website with CSS.

How to add some non-standard font to a website with CSS?

To add some non-standard font to a website with CSS, we use the @font-face rule.

For instance, we write

@font-face {
  font-family: "My Custom Font";
  src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont {
  font-family: "My Custom Font", Verdana, Tahoma;
}

to add the My Custom Font font with

@font-face {
  font-family: "My Custom Font";
  src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}

font-family is set to the font’s name. src is set toi the URL with the font.

Then we set font-family to "My Custom Font" to set that as the font for p element with class customfont.

Conclusion

To add some non-standard font to a website with CSS, we use the @font-face rule.

Leave a Reply

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