One of the most complicated things when creating a website, is typography management (font management) because of the vast array of font attributes involved like:
- font family
- font size
- font style
- font weight
- line height
- letter spacing
- font variant
- colour
Then we get into other things that relate to the above list like font sizes:
- pixels (px)
- percent (%)
- em
- rem
- initial
If you want to read more about fonts and attributes, you can check out the W3schools website:
W3Schools Fonts
Fonts can be overwhelming, especially when we are dealing with literally 1000’s of fonts and font families. But it doesn’t just stop there, we also have to take in account that not all fonts are compatible with every language on the planet.
I know many theme users like to have at least some control over fonts and/or attributes associated with the theme they use. Not all themes have extra fonts, while some people will use font plugins instead. Generally the better solution because with a plugin, you can use your fonts if you change themes, but they often include extra font features and settings you can use compared to what a theme offers.
Influential Font Management
This theme includes some font management which is found in the Customizer. This quick tutorial will give you an introduction to what you can do with fonts, but you can still override fonts and styling with your own — you don’t have to use the theme’s typography options.
Enable Typography Options
This turns on all your font option settings in the customizer.
- Go to Appearance >> Typography Options
- Check the box next to “Turn on all Typography“
- If you need to use “Cyrillic” fonts, the default main font of Influential uses Open Sans, so you can check this box if needed.
- You have the option to add two more Google Fonts. Make sure you enter the Google font name as the name is shown at Google. For example, if you want to use Ubuntu Condensed, you would add that to the Google font field like this:
- Click “Save & Publish“
NOTE When you turn on the typography, your extra settings won’t show until you click Save and refresh the Customizer window.
Typography Settings
When you turn on the typography options, you will see several new settings added to the customizer:
- Body Font Size - This is the global body font
- Main Content - This is the main content area
- Headings - H1, h2, h3, h4, h5, and h6
- Blog Post Title - This is the blog post titles
- Widget Titles - The headings for your widgets
Each size setting uses percent (%) instead of the theme’s default “rem” units to make things a bit easier for the end-user. Each one also has a default setting which is also noted in the description text:
Change Font Styling not in the Customizer
If you need to modify text (font) in a page that is not part of the Typography Options, you will need to create your own custom CSS to override the theme’s own styling. This will depend on what you need to change, so if you are unsure what to make changes to, post your question in the support forum related to the theme you are using….in this case, Influential.
If you are using a child theme, you can make your custom CSS changes in the child theme’s style.css file. This won’t be lost when the parent theme has updates. However, if you are not using a child theme, you will need a plugin like “Simple Custom CSS” to make your changes.
Your Own Font Sizes
If you make your own font size modifications, I would recommend using the “rem” unit so that people with visual impairment, can use their browser settings to enlarge the text in the page. REM is a relative size like em and %, but using a fixed size like px (pixels) will not resize for them. If you want to know the equivelent of rem, em, %, as it relates to pixels, you can refer to this great online converter:
PX to EM
Note When using that online converter, the em can also represent “rem” units as well. Whatever the em is, it’ll be the same for rem. Also, if you plan to use your own custom CSS to manage fonts instead of the Typography Options, you can keep the “Turn on all Typography” unchecked.