Custom Fonts are only available for the alora and evolve+ theme. The themes provide Dashboard admin access to more than 500 Google Web Fonts, the standard system fonts, as well as any custom font.


Video Tutorial

 

The Custom Font will only display on the headings and navigational menus. To add or change a custom font you will need to upload four different kinds of file types: .woff, .tff, .svg, .eot.  However, not all fonts come with the four different file types. In that case just upload the same file (preferably a .tff) to each of the four upload locations.

The steps-below will install the Custom Font successfully within the alora or evolve+ theme:

1. Check that the alora or evolve+ theme is the currently installed and activated theme by selecting Appearance -> Themes

alora-active

2. Unzip the custom font file that you have already downloaded with an unzipping program such as WinZip.

3. Verify that you have the required four different font files: .woff, .ttf, .svg and .eot.

If you do not have the four different file types, verify that you have at least a .ttf. In this example below, the Rockmasta font only comes in .ttf (TrueType font) and .otf (OpenType font). And so we will only use the .ttf font.

truetypefont

4. Go to Appearance -> Theme Options -> Typography  -> Custom Font for Menus and Headings. You should then see four Custom Font fields representing each of the four font files to be uploaded.

custom-font-page

5. Upload the four font files individually, ensuring that each file type (.woff, .ttf, .svg and .eot) are uploaded to the correct location on the page. This is done by successfully navigating and hitting the Upload button.

If you only have the .ttf file for your font, then upload that into all locations. Make sure to hit Save Changes at either the top or the bottom of the page.

font-upload-save-changes

6. In order to make sure your custom font takes precedence over Google Fonts, navigate to the Googel Fonts settings and choose Select Font (i.e. nothing) for each section that you want your custom font to appear in.

For example, if you wanted your custom font to appear everywhere, then you would choose Select Font in each section, as in the screenshot below.

select-font

 

 

Click Save Changes, and you should now see your custom font showing up on your site. Check the before and after shots below.

BEFORE (Google Font)

before-font

 

AFTER (Custom Font)

after-font