Choose Fonts

The Fox allows you to choose fonts from 3 sources:

1. System fonts: Helvetica, Arial, Georgia..: They are built-in fonts so your site doesn’t need to load. It increases site speed significantly. The down side is they’re default fonts hence just bland.
2. Google Fonts: Select any fonts from Google fonts directory. This is most popular option. The only down side is you have to load it from Google. Those fonts are hosted by Google.
3. Upload your own fonts: Fox allows you to upload custom fonts. Those fonts are hosted by your site so you don’t need it from Google. The down site is you need to prepare font files. But don’t worry, everything is now ready, you just need to spend few minutes to set up.

Here’s few things you need to know before choosing fonts for your site.

1. The Fox predefined font system has 3 primary font positions: Body font, Heading font, Menu font and 2 custom font positions: Custom font 1, 2.
2. To choose predefined fonts, please go to Dashboard > DESIGN > Choose Fonts
3. Besides above positions, we have many other typography positions. You can change font for almost any elements: Post title, post meta, post excerpt, logo, tagline, single title, subtitle, Archive title, Archive description, Blockquote, Button, Input..
4. For each position, you can choose font value to be some primary value like Body font, Heading font, Menu font or set it custom value from System fonts, Google font list or your uploaded font list.
5. Normally, you should always choose it to be some primary font for 3 reasons. One is for performance. Loading too many fonts make your site slower. Another is for design principle, It won’t let your site looking messy. Final reason is for synchronization. If you set “Post meta font” it to be “Heading font” for instance, then when you change heading font, it applies to all dependent positions and you don’t need to change each position manually.

Upload Custom Fonts

The system font and Google font are obvious. You just choose them. Here’s instructions how to use custom font upload.

Prepare font files: Fonts in this case are called “web fonts”. Unlike fonts being used for design softwares with formats *ttf or *otf, webfonts require 2 file extensions: *woff and *woff2. For instance, if you want to use Futura font, you must prepare futura.woff and futura.woff2.

Now there’s a lot of online web services to help you converting from *ttf or *otf or font formats you have into web fonts (ie. woff2 and woff). Please Google search the phrase “Webfont generator”, you’ll see many.

If you have different weights, eg. bold and light for Futura, you need to convert few times to get Futura_Bold.woff2 and Futura_Light.woff2 files.

Assume you have your font files already. Here’s the steps:

1. Go to Dashboard > Appearance > Custom Fonts, you’ll upload your custom fonts there. For instance, here I have Ostrich Sans Black font I used transfonter.org to convert it into webfonts.
2. Hit Add New Font
3. Now go back to your Customizer > DESIGN > Choose fonts, you’ll see the font “Ostrich Sans Black” appear there and ready for selecting.