Table of Contents
The Fox has 3 primary font positions:
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”.
Here’s where you can find primary fonts.
Font Source: Google Font or Upload Your Font
You can enter any font from Google Font Directory or sytem fonts. Here’s list of system fonts:
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.
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. */
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)
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
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.
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
Below demos are just examples. More to come in the future and you can mix their features. If you see one feature in a demo, you can use it in any other demos. All demos are included in the download package and ready to import in 5 minutes.