By default, this theme does not use Google Fonts, rather it uses the fonts that currently exist on your computer. However, you have the option to make some basic changes by loading up to 2 Google Fonts and then changing the main body font and for the headings.
What Can You Do With Fonts
Managing fonts and typography is a massive topic and it’s extremely involved and can often be very complicated for most people. The reason is because there are so many style options relating to typography and fonts…especially when there are literally 1000’s of fonts available. To give you an idea of what kinds of style options fonts and typography includes, let’s look at a list:
- Font – This is the actual font, or font family such as Arial, Helvetica, Times Roman, etc.
- Font Size – This is the size of your font (text) in your page content
- Font Style – This is a style of your font (text) such as italic
- Font Stretch – This basically means make the font wider or narrower
- Font Variant – Specifies whether or not a text should be displayed in a small-caps font
- Font Weight – This is where you choose light, bold, extra bold, etc.
- Text Decoration – Underline, none, etc. There are other variations of text decoration.
- Text Color – The colour of your text.
- Text Shadow – Adding shadow
- Text Transform – Make all lowercase, uppercase, etc.
- ….there’s more.
If you want a really good source of learning about fonts and text styling when it involves CSS, the best source is the W3Schools.com website.
FONT PLUGINS – Normally I recommend using font plugins because compared to what themes offer, a plugin will be a LOT better with features and options. You can use the basic typography feature in this theme, but I would recommend checking out popular font plugins for more flexibility.
Fonts – Part 1
- Go to Appearance >> Customize >> Typography Settings
- Use the text link to visit Google Fonts and select the font you want. This will open a new tab in your browser so you do not lose your tutorial here. Now you can choose a font like Lato for example, by clicking on the ( + ) button in the upper right corner:
- You will need to copy the font URL that shows up in the link box area. This example shows the Lato font link.
- Paste this link into the first Google Font field in the “First Google Font URL” field.
- Click on “Save & Publish” at the top.
Customizing Your Google Font Selection
If you are not familiar with how Google fonts works when selecting weights, styles, etc., I will give you a quick tutorial below.
When you have selected a font, a black bar (box) will show in the lower right of your browser window which is collapsed until you click on the ( – ) icon to open it:
By default, the link showing will just be a single version of the font, but if we want to add a bold version for example, we click on the tab “CUSTOMIZE” to open the window which displays all the variations of this font that you can select the ones you want. For this example, I’m choosing Regular 400, bold 700, and bold 700 Italic:
Now we click on the “EMBED” tab to see the new link we will be copying:
This is the link that gets copied and pasted into your “First Google Font URL” field. If you want to use another Google font, you would look for another font and repeat the steps above.
Fonts – Part 2
Now that you have the Google font(s) of choice loaded, you can now use the font for the body text of your website and/or the headings. All you need to do is type in the font name into the fields for the Body and the Headings fields shown. However, you do not have to fill out both if you just want to change the font to one or the other.
- To change the body font to use Lato, just type in Lato
- To change the Heading font to use Lato, just type in Lato
NOTE: If you are using a font that contains more than one word in the name, for example, Open Sans Condensed, do it in quotes like this: “Open Sans Condensed”
Using a Fallback Font(s)
If you ever looked at a theme’s stylesheet, you will discover that font-family will be coded with more than one font. This is done for a reason and works as a fallback option. For example, if you see this:
font-family: Arial, Helvetica, Sans-serif;
That means that if the person who is viewing your website does not have Arial installed in their computer (this is a whole other topic), it will use the next font which is Helvetica, but if that is not available, it then goes on to the next one, in this case, Sans-serif. One scenario is that if someone is on a MAC computer and they don’t have the Arial font installed, the MAC will use Helvtica which is installed on a MAC.
Long story short, when you type in font names in the Body or Heading fields of the customizer, I recommend doing a fallback font. Let’s use Lato as an example for the body setting. I would type in:
Lato, Arial, Helvetica, Sans-serif
If I was using Open Sans Condensed (remember this is more than one word in the font name), I would type in:
“Open Sans Condensed”, Arial, Helvetica, Sans-serif
Additional Font Styling Options
This theme was recently updated to include a revamp of the typography settings and options to include the ability to add a font for specific elements and sizing. You might discover some minor changes, but here is a tutorial relating to the changes made…
- You can now add a font for your Site Title by entering in a font name. Make sure that the font you want to use is either a common font that PC’s and MAC’s have, or if you are using Google Fonts, otherwise your site visitors won’t see the font if it’s not accessible.
- You can now add a font for your page and post headings (titles)
- You can now add a font for your menu
- In addition to the above, you can also set your font sizes.
Font Sizes
This theme uses the rem unit for font sizing because it’s a relative size which means for people with vision impairment, they will use a browser feature or screenreader to make text larger. If you use px (pixel) sized fonts, it won’t work because pixel is a “fixed” size. So we used rem as the font size unit. To learn more about how to convert pixel to em (including rem), you can use this awesome online tool:
The above tool will give you the rem equivelent to the pixel sizes.
When you enter a size into the fields for a size, leave the rem part out and just add the value. For example, if you want to change the 4rem size for the Site Title to 3.125rem, you simply type in 3.125 to replace the default 4 value and click “Save & Publish“.
Other Font Style Attributes
There are a TON of attributes for fonts, so it’s almost impossible to include them all in the customizer here (for any theme) without using an actual Font Plugin. With a plugin, you get all options and usually they load all the Google fonts for you to select from within the plugin. Mostly it’s all mouse clicks.
Even when using plugins, you may still need to do some minor CSS, or to find out what the selector tag and/or CSS class name is to apply a style to. For example #site-Title is an ID used for the theme’s site title styling. So to apply something like making it bold, italic, or even a colour, it would be done like:
#site-title {font-weight: 700;}
This will of course be dependent on the theme being used, whether by us or another theme site, the plugin can only go so far as themes are coded different from one another.
But if you want to apply a specific style to something specific in your page content, such as bold, you can submit a Support Ticket or use the Support Forum to find out how this is done. Generally it just requires a small piece of CSS code you would put into the customizer’s Additional CSS setting (a WordPress feature).
Example: For the site description (tagline), you would do this for bold:
#site-description {font-weight: 700;}
Using the Theme’s Drop Cap Style
You will notice in the Typography Settings tab of the customizer, a setting for showing the Dropcap on full posts….just like this:
This simply adds an extra style to your full post, so to enable it…
- Go to Appearance >> Customize >> Typography Settings
- Look for the “Show Full post Dropcap” setting and check the box.
- You can also change the colour of your dropcap as well.
- Click “Save & Publish“
In Summary
As you can see, typography is a very time consuming and complex thing. If you have a site that is complex with many different fonts, styles, and other requirements, the theme, a font plugin, and custom CSS coding will be required. Unfortunately there is no one-click magic solution when it comes to fonts and typography that gives you literally tens of 1000’s of variations.