Sometimes, we want to use .woff fonts in a website with CSS.
In this article, we’ll look at how to use .woff fonts in a website with CSS.
How to use .woff fonts in a website with CSS?
To use .woff fonts in a website with CSS, we set the src property.
For instance, we write
@font-face {
font-family: "myfont";
src: url("fonts/awesome-font.woff") format("woff");
}
@font-face {
font-family: "myfont";
src: url("fonts/awesome-font-bold.woff") format("woff");
font-weight: bold;
}
@font-face {
font-family: "myfont";
src: url("fonts/awesome-font-boldoblique.woff") format("woff");
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: "myfont";
src: url("fonts/awesome-font-oblique.woff") format("woff");
font-style: italic;
}
to add @font-face rules with the font-family property set to the font name to add an external font.
And we set the src property to the woff font URL.
Conclusion
To use .woff fonts in a website with CSS, we set the src property.
