Loading custom fonts with @font-face

By default the theme provides an option to select either the default web safe fonts or Google fonts. For more information on theme fonts support, please refer to the “Fonts” section of the documentation.

If you would like to apply your custom font file (rather than using Google fonts), you can apply it with @font-face – you can read more about @font-face here:
http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Basically what you have to do is:
1. Upload the font file (for example a .woff file) to your server

2. Add the following CSS to the Additional Styles section of the theme’s options panel:

 @font-face
{
font-family: myFirstFont;
src: url(FONT-URL);
}

In the snippet above replace FONT-URL with the full URL of the font and optionally set a custom font family name.

3. The next step depends on the theme that you use:

• Story, Porcelain, Mineral and Evermore themes:

The easiest way to add your custom font to the font list would be: in the Theme Options -> Style Settings -> Fonts -> Add Google Font section add an item with the following details:

Font name: myFirstFont (the font name that you have specified in the field above)
Font URL: [empy space]

That should add the font to the list so you can select it to the elements you like.

• Other themes

You can just set custom font family name in the corresponding font section of the Theme Options -> Style Settings -> Fonts section. For example in order to apply this font to the headings, you can set the font family name in the headings field:

Headings font family myFirstFont  (the font name that you have specified in the field above)