How do I add custom fonts using the @font-face CSS property?

Choosing the perfect font is an important decision for a designer or developer. It's a major component in the brand's identity. Sometimes you need something special to really make an impact. 

There are two ways to add fancy fonts to webpages: linking to a font hosted on another site, like Google Fonts, or adding them via the @font-face CSS property.

OVERVIEW OF ADDING THE @font-face PROPERTY

To add a font to your CSS using the @font-face property, you need to:

1. Download your font files. (It’s generally a good idea to use .woff, .woff2, and .otf font formats because some browsers prefer one font type over another.)
2. Just like adding stylesheets to a css folder and images to an img folder, you'll add the font files to a "fonts" folder in the root of your project directory.
3. At the top of the css file, you'll add:
   @font-face {

       font-family: family-name, fallback font-family;
       src: url('file path to the font'), format('format');
   }

4. Add the font-family to the text element you're styling.

DIFFERENT FONT FILE FORMAT EXAMPLES

There are five different font file type formats you can use:

• Web Open Font Format (.woff)
• Web Open Font Format 2 (.woff2)
• OpenType (.otf)
• TrueType (.ttf)
• Embedded OpenType (.eot)

To begin, make sure to always put your code blocks with @font-face properties at the top (or close to the top) of your CSS stylesheet.

Then you need to do two things:

1. Give your font a name that you will use throughout your CSS.
2. Make sure you link from your CSS file to your font file in the font folder.

Adding a WOFF Font

Here’s an example of how you might add a Web Open Font Format font file: 

Adding a WOFF2 Font

Here’s an example of how you might add a Web Open Font Format 2.0 font. You’ll notice it’s done exactly the same way as the WOFF font, the only difference is the file extension and format value:

Adding an OTF font

Here’s an example of how you might add a Bemio OpenType font file to your CSS:

Adding an EOT Font

Here, you’re adding an Embedded OpenType font file: 

Adding a Font Variant

Sometimes you’ll need to use a separate font file for the different font style and weight variations. Here’s an example of a separate font file for the italic version of the Bemio OpenType font:

ADDING FANCY FONTS THROUGHOUT YOUR CSS

Once you have the @font-face properties in place with your new fancy fonts, you can use them throughout your CSS.

Here, you’re applying the font family Bemio to the <p> tag, just like you might apply the font family Arial or Georgia. The only difference is that you must add single quotes around the font name. Don’t forget those quotes—your fancy font won’t work without them!

And if you need to provide a separate font file for your font style variations, then you’ll need to call that out separately in your CSS.

Here, you’re telling the <em> tag that it needs to use the separate font family of Bemio Italic instead of just applying a font-style: italic; property.

Want to learn more about the @font-face property? Check out these resources! 

W3Schools: CSS @font-face Rule

Mozilla Developer Network (MDN): @font-face

CSS-Tricks: How to use @font-face in CSS

PageCloud: The Easy Way to Add Fonts to Your Website (Including Custom Fonts)