Categories
CSS

How to embed fonts in CSS?

Spread the love

Sometimes, we want to embed fonts in CSS.

In this article, we’ll look at how to embed fonts in CSS.

How to embed fonts in CSS

To embed fonts in CSS, we use the @font-face directive.

For instance, we write

@font-face {
  font-family: "Graublau Web";
  src: url("GraublauWeb.eot");
  src: local("Graublau Web Regular"), local("Graublau Web"),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

to set the font-family CSS property to the name of the font.

src is set to the font’s location on disk.

format specifies the font format of the font file in the given location.

Conclusion

To embed fonts in CSS, we use the @font-face directive.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.