How to embed fonts in CSS?

Sometimes, we want to embed fonts in CSS.

How to embed fonts in CSS, we will look at in this article.

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 the name of the font,to set the font-family CSS property.

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

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

Conclusion

We use the @font-face directive, to embed fonts in CSS.

Leave a Reply