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. I should also mention that I am workin gon adding more advanced font and typography options to our themes in the near future.
Setting Fonts
With the free version of this theme, it does not include the extra fields to add up to two Google Fonts, but you can still change your fonts for the main body text and the page headings by typing in the name(s) of the fonts you want to use.
The downside to this is that you will need to reference a list of “default” fonts that come with the Windows operating system and/or the MAC OSX operating system. The reason you need to do this is so that whatever font you use, in order for the person to see it, they have to have it installed on their computer.
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
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“