Custom @font-face

Here is a quick tutorial to show you how to add custom fonts to your theme using @font-face.

Step 1

First you need to convert the fonts (eg. TTF or OTF format) that you have to use with @font-face. Use one of the following tools: https://transfonter.org, http://fontface.codeandmore.com or http://www.fontsquirrel.com/fontface/generator to generate the fonts.

Step 2

Download the generated zip and extrat the zip file. You should have the following font formats: .eot, .svg, .ttf and .woff.

Upload those font files to your server:

  • First connect to your FTP server using a FTP software
  • Go to root folder where you have WordPress installed, go to 'wp-content' folder, and create a new folder 'fonts'
  • Upload all font files to the 'fonts' folder

Step 3

Now you need to specify the font in your theme. Add the following CSS to your site's WP Admin > Appearance > Customize > Custom CSS panel (if you have a child theme, you can add it in your child theme's style.css file):

@font-face {
    font-family: "FontName";
    src: url("http://yoursite.com/fonts/fontname.eot");
    src: url("http://yoursite.com/fonts/fontname.eot?#iefix") format("embedded-opentype"),
        url("http://yoursite.com/fonts/fontname.woff") format("woff"),
        url("http://yoursite.com/fonts/fontname.ttf") format("truetype"),
        url("http://yoursite.com/fonts/fontname.svg#fontname") format("svg");
}

h1, h2, h3, h4, h5, h6, #site-logo, .post-title, .widgettitle {
    font-family: "FontName";
}

In the above CSS, the first part is to specify where the font files are on your server, so make sure the font name and font file URLs are correct. The second part specifies which elements should use the custom font. In our example, we specify the following elements to use the custom font: h1, h2, h3, h4, h5, h6, #site-logo, .post-title, .widgettitle.