This is probably one of the most complex things for any website, regardless of the theme you use because within your site pages, there are many typography elements happening. When you consider that there are literally 1000’s of font styles available, you cannot possible include them all into a theme. Each person has their own preference as to the font and styling they like, so this also creates a challenge in theme development. Consider the following:
- Font Family - This is the name of the font. If you are on Windows or a MAC, each one offers a selection of built-in fonts, but not are all the same on both platforms, so this means whenever you use a font, you need to provide a font for users of Windows and another for users of MAC. If you use a single font for Windows, anyone on a MAC won’t see it; it works the other way around too.
- Font Size - This is the size of your font (text) that you need to apply to elements as well. However, it also depends on the font family you use because each font displays sizes differently.
- Font Weight - This is the thickness of the font letters in a page. Normally you have “Regular” and “Bold”, but some fonts also offer more like “Light”, “Condensed”, “SemiBold”, “Extra Bold”, etc.
There are other font attributes like colour, letter spacing, and more that you can apply, but you can start to see why it becomes complicated to put all of this into a theme for every font based element. For example, a theme might have several instances of the H1 heading tag, but each could have a different size, weight, colour, etc., all applied.
Basically there are just too many font based elements in a theme to give you an actual setting for each…if I did this, you would have a customizer that has 100’s of typography settings.
The Best Way
The best solution is to use a plugin for customizing fonts, or to create your own typography CSS overrides of the theme. But to help you out with the basics relating to this theme and to the primary text elements, here are a few snippets of CSS code to help you get started…
IMPORTANT Never make changes to the theme files unless you are using a child theme. The other option is to use a plugin called Simple Custom CSS or Jetpack’s Edit CSS.
To Change the Font and Styling to Site Title & Tagline
Copy and then apply custom CSS to where it says add your custom font styling here:
.site-title {
add your custom font styling here
}
.site-description {
add your custom font styling here
}
To Change the Font and Styling to the Headings
Copy and then apply custom CSS to where it says add your custom font styling here:
h1, h2, h3, h4, h5, h6, .entry-title a {
add your custom font styling here
}
To Change the Font and Styling to the Body Content
Copy and then apply custom CSS to where it says add your custom font styling here:
body {
add your custom font styling here
}
To Change the Font and Styling to the Headings
Copy and then apply custom CSS to where it says add your custom font styling here:
h1, h2, h3, h4, h5, h6, .entry-title a {
add your custom font styling here
}
To Change the Font and Styling to the Main Menu
Copy and then apply custom CSS to where it says add your custom font styling here:
.primary-navigation li,
.site-navigation li {
add your custom font styling here
}