Font management is a very large topic because it’s probably the one thing that most users will, at some point, want to change in their site pages. I know many people would love to have every font choice and everything about sizes, styles, colours, and more, all rolled into something easy to click and you’re done kind of thing….in a perfect world, yes. However, I hate to be bearer of bad news, but you will have to do some form of custom CSS for your site somewhere along the lines.
If you want to change the font of something in your pages, you first need to have some understanding about how and where fonts come from. Anyone who uses a computer, whether it’s a Windows machine or a MAC, will have fonts that are part of their operating system. This is what allows us to see different fonts when we view a page or document on the screen. When viewing a webpage, you see the fonts used because of one of two things:
- The font being used already exists on your computer
- The font being used is a custom font that the website is loading in for you to see it
How you choose a font is dependent on whether you are using a font that exists on a user’s computer or if you need to import that font into the web page. If you are using a custom font that you put into your computer, and then use CSS to choose that font family for your web page, please note that others who view that page will not see that font, even though you do. This is because they don’t have that font yet.
How a Font is Used in a Theme’s CSS
This is a topic that can be a whole separate tutorial, but basically in a nutshell, you do CSS like this:
.entry-title {
font-family: Arial, Helvetica, sans-serif;
font-size: 2rem;
font-weight: bold;
font-style: italic;
color: #000000;
}
The font family is the type of font, then we have the font size, followed by the weight of the font, style, and then colour of the font (text). This is the long version of doing fonts, but I did this to show how you can manage the different aspects of a font for a particular page element, such as the .entry-title which are the post and page titles.
The font family you see above does a couple things. The first is that it gives 3 different fonts that can be used. If the first one “Arial” is not available, it then goes to the next “Helvetica”, and if that isn’t available, it then uses “sans-serif”. The second thing it does is that the first one is a font found on Windows computers, while the second one “Helvetica” is found on MAC’s. So if a person is on Windows, they will see Arial, but if they are on a MAC, they will see Helvetica.
Here is a great source to learn about using Fonts in CSS:
Adding Custom Fonts
If you want to use a font that does not exist on a users computer, such as a fancy Google font you seen and like, you will need to follow their documentation on the different ways you can use that font. Or, you can use a font plugin to load in a font of your choice.
Font Management in Pure & Simple
This theme uses some font management in the theme options customizer, but only gives you settings for sizes. It starts off with a base font size which most themes and websites use 100% as the starting point. This generally translates to 16px in size. The settings in the customizer are in “rem” units. Most people are probably familiar with “px” sizes, but the drawback to pixels is that it’s a fixed size and this will never change if you were to use a font plugin to change sizes; you would need to do custom CSS to change the size. REM is a relative size to the main body of 100%, so things will self-adjust based on what you set your body base size to…I recommend you keep it at 100%.
To learn what an rem is in pixels, you can check out this online tool for converting px to em (or rem) and back:
- Go to Appearance >> Customize >> Font Management
- Select the elements that you want to change the font size to
- Click Save & Publish
Screencast – Font Management