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:
.main-navigation li {
add your custom font styling here
}
.main-navigation li li > a {
add your submenu font styling here
}
Using the Typography Settings in the Customizer
The settings for Aberration typography are found in the customizer and mostly deals with sizes only. If you use a plugin, you should be able to still use that for size management, but if you simply want to change sizes for the current theme elements, you can. If you use these settings, be careful of your choices, because remember that this theme is responsive, but when viewing your site on smaller mobile devices, these settings will NOT adjust to fit. If you need that to happen, then you have some work to do by creating Media Queries for the various mobile device resolutions….
- Go to Appearance >> Customize >> Typography Options
- Make any size changes to the various elements shown within these sets of options. You can see the results by navigating the “Preview Window”.
- Click Save & Publish
You may notice that my font sizes uses the “rem” attribute. There are many others such as px, em, and even percent, but for this theme, I use “rem”. To help guide you and to understand what the rem is, or more so how to convert px to rem (em), there is a great online tool that you can bookmark for reference.
PX to EM
The online tool is em, but the conversion can work for rem as well…which is what I use.
Base Font Size
With this theme, you have a setting for increasing “all” fonts throughout your website pages when using Aberration. This setting will resize everything using the “em“, “rem“, or “%” size attributes, so be careful when using this. By default, this is set at 100, which represents 100% as a base font size. If you need to increase or decrease this, you can change the default 100 to your own preference.
- Go to Appearance >> Customize >> Typography Options
- Find the Base Font Size setting and make your change
- Click “Save & Publish“
Cyrillic Fonts
This theme uses two Google fonts, Bad Script and also Open Sans. Both offer limited Cyrillic options for the Aberration theme by enabling this from the customizer.
- Go to Appearance >> Customize >> Typography Options
- Find the “Load Cyrillic Font Subsets” setting and check the box next to it.
- Click “Save & Publish“