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
NOTE: This theme already loads the font Lato, so the above is just an example.