How to embed custom font using @Font-Face method

Want to embed the custom font into your site but can’t figure out how to do it? In this tutorial, we will be discussing, how to use custom font into your site using CSS3 @Font-Face method. For this, you need to upload the font files into your server then adding it to your theme or template using few snippets of CSS.With this font-face rule, you can render any font whether the user has installed the font or not.

Selecting and Uploading the font

First of all, find the font you want to use in your pages.There are many sites out there that provide free and premium font.Just make sure the font you are using is licensed one for web use.Once you have found the font, download it.

Now you have selected and downloaded the font you wish to use, its time to upload the font files to your server.Remember to include the files for any variants of the font because there are many font files like TrueType Font (TTF), OpenType Font (OTF), Web Open Font Format (WOFF), Web Open Font Format 2.0 (WOFF2), Embedded OpenType Font (EOT) and all are not browser compatible so you need to include separate font file for separate browsers.You can put font file anywhere in the site folder just note down where the font files are stored on your server.

<h2<Adding Your Font using @Font-Face method

Now in your CSS file, Add a font-face declaration to the style code like this

@font-face {
  font-family: 'Baskerville';
  src: url('../fonts/Baskerville/subset-BaskervilleLight-Italic.eot');
  src: url('../fonts/Baskerville/subset-BaskervilleLight-Italic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Baskerville/subset-BaskervilleLight-Italic.woff') format('woff'),
    url('../fonts/Baskerville/subset-BaskervilleLight-Italic.ttf') format('truetype');
}

In the new @font-face rule, you must first define a name for the font (e.g. Baskerville) and then point to the font file.For different font file, you need to give correct file path.

Using font to the page elements

Now you have added the font using @Font-Face method, you can use the font in whichever page element you want.
For eg:

 
P{
font-family: Baskerville;
}

You can choose the fallback for the font also

P{
font-family: ‘Baskerville’,sans-serif;
}

That’s it. This is how you can use custom font into your pages. Happy Coding :)

Image Credit: Pixabay