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 you should have the following font formats: .eot, .svg, .ttf and .woff. Upload those font files to your server (ie. create a 'fonts' under your root folder or 'wp-content' folder).

Step 3

Now you need to specify the font in your CSS. The CSS can be added via WP Admin > Appearance > Customize > Custom CSS panel or custom_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");
}

Now you may specify which elements to apply the custom font. Sample code:

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

Celebrating our LUCKY7 Anniversary with a 50% Sale + 7 Lifetime Club Giveaway! Submit entry here