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:, or 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("");
    src: url("") format("embedded-opentype"),
        url("") format("woff"),
        url("") format("truetype"),
        url("") 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";

Builder V4 is coming soon. Try out the free Beta Version now!