Typography

Understand the concept

The Fox has 3 primary font positions:

  • Body font in Customize > Design > General
  • Heading font in Customize > Design > General
  • Menu font in Customize > Header > Header Navigation

And there’re a lot of other elements you can set font, say post title, post content, blog title, widget title, block quote, image caption etc.

For 3 primary positions, you can choose any font from Google font list or upload your own font files. For other positions, you can choose from 3 primary fonts or enter a custom font.

Why? Because in a site, for both aesthetic aspect as well as performance, you shouldn’t use too much fonts. And when you set a block quote font same as body font, then when you change the body font your blockquote font will change accordingly. You don’t need to change at 2 places.

After installing Fox from scatch, all 3 positions are “Helvetica Neue”.

Set up primary fonts

Here’s where you can find primary fonts.

  • Body font in Customize > Design > General
  • Heading font in Customize > Design > General
  • Menu font in Customize > Header > Header Navigation

Font Source: Google Font or Upload Your Font

Google Font

You can enter any font from Google Font Directory or sytem fonts. Here’s list of system fonts:

  • Helvetica Neue (default)
  • Helvetica
  • Arial
  • Times
  • Georgia

When you enter a few letters, a hint dropdown appears. Just select your font.

After select the font, please choose font weights to load. Don’t check for all weights, just use only font weights you need so that your site doesn’t need to load unused weights.

Upload Your Custom Font

To use your custom font, please select “Upload Your Font” in the font source option.

01/ Prepare your fonts

Modern browsers only require *woff2 and *woff2 font files so please prepare those file formats. Other font files like *otf, *ttf are unnecessary.

If you have some *otf font or *ttf font file, you can use some webfont generator tool such as this one. After finishing generating process, download and unzip the package you’ll have *woff2 and *woff files.

By default, WordPress doesn’t allow you to upload those files for security reason. You’ll get this error message when upload them:

Sorry, this file type is not permitted for security reasons

Please note that it’s a WordPress problem, not The Fox theme problem and they disable it for security reason.

If you have installed Fox Framework plugin, that plugin helps you to get rid of this error message. Otherwise, you must use a plugin to fix or edit wp-config.php file to upload them.

Please open ROOT_DIRECTORY/wp-config.php file on your server then add the following code to the file, anywhere above the line reading /* That’s all, stop editing. Happy blogging. */

define('ALLOW_UNFILTERED_UPLOADS', true);

Now you’ll be able to upload *woff2 and *woff files.

02/ Upload your fonts

After upload both *woff2 and *woff file, you’ll see your new fonts being applied immediately. You’ve done and there’s no further steps needed.

Font name (optional): If you leave this empty, Fox’ll automatically use your file name as font name. If you need to use your font elsewhere, you can enter a custom name, eg. my futura (it’s not “my futura”, just my futura without quote)

Other typography properties

Font Size: There’re 3 fields to enter font size corresponding to 3 screens: desktop, tablet and mobile. If you enter a number without unit, it’ll be pixel by default. You can enter other units, say 1.5em for instance.

Font weight: 100 – 900. 400 is normal, 700 is bold and 300 is light.

Font style: normal or italic.

Text Transform: UPPERCASE, lowercase, Capitalize, None

Letter spacing: Enter for instance 1px, 1.5px etc

Line Height: Please enter correctly this option. Normally, line height value is between 1 – 2, eg. 1.5

Font Subsets

If you use a language like Vietnamese, Greek or any language that requires font subset, please go to Customize > Design > General > Font Subsets to check to font subsets you need. Otherwise, some characters won’t be displayed correctly.

Note that not all Google fonts support all characters of any language so please test your font before using.

Font for other positions

Fox allows you to set typography for a lot of elements. Here’s the list of where you can find them:

Body font: Primary font above

Heading font: Primary font above

Navigation font: Primary font above

Logo: Customize > Header > Header Logo. But just in case you use text logo.

Site Tagline: Customize > Header > Header Logo

Blog Post Title: Customize > Blog Post Layouts > POST DESIGN > Blog Post Title

Post Meta: Customize > Blog Post Layouts > POST DESIGN > Post Meta

Standalone Category: Customize > Blog Post Layouts > POST DESIGN > Standalone Category. Standalone Category is the category element that lies above post title.

Single Post Title: Customize > Single > Post Header > Single Post Title Font

Post Subtitle: Customize > Single > Post Header > Post Subtitle Font

Post Content: Customize > Single > Post Content > Single Post Content

Single Label: Customize > Single > Post Content > Single Label. Single Label is the text like: “You might also like”, “Comments”, “Reply”..

Page Title: Page font is same as single post title font.

Button: Customize > Design > Form Input + Button

Form input: Customize > Design > Form Input + Button

Widget title: Customize > Design > Widget title

Block quote: Customize > Design > Block quote

Drop cap: Customize > Design > Drop cap

Image caption: Customize > Design > Image caption

Section Heading: Customize > Homepage Builder > General Settings > Heading