How to embed fonts in CSS?

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.