Sick of using web-safe fonts, or scouring Google fonts (https://fonts.google.com/) for something new and innovative? With the @font-face rule, it’s totally possible to use ANY font in your web apps, as long as you have access to the .ttf/.otf or .woff file on a server somewhere (preferably on the server that’s local to your project).
To use the @font-face rule, you’ll need to define the path to your font files at the top of your CSS file, like this:
Join us in our newest publication:
@font-face{
font-family: ‘Font Name’;
src: url(path/to/font/file.ttf)
}
Other properties that the @font-face property will accept: font-stretch, font-weight, unicode-range.
After properly defining the @font-face property, you can apply your new font-family to your HTML elements how you normally would. See the example below:
body{
font-family: ‘Font Name’;
font-size: 24px;
font-style: italic;
}