How to Use the @font-face Rule

Published January 16, 2017 by CSS Newbies.

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:

@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;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>