Let’s face it, if you run a blog, the shape your words take represents your brand and your content. So it is important that you choose the perfect font that embodies your message. Sure, you’re probably wondering if font selection is that important, but it sure is! Because, the fonts you choose in designing your website’s theme can influence whether or not visitors stick around to see more than a page or two of your content. This matters when trying to build a following.
Even if your words are compelling and engaging, if they are not aesthetically pleasing, you will lose visitors. This article is going to help you change your fonts in your WordPress themes to better suit your brand and ensure your readers have a ‘readable aesthetic’.
Table of Contents
The Font Test
Before setting up your WordPress theme, you want to check which fonts are present on your computer. There are a wide variety of fonts available. And if you choose fonts that are not on everyone’s computer for your theme then a generic typeface like serif or sans-serif will show up. So, in order to see a list of the fonts available on your computer do the font test. If the typefaces you are using are on the list, then you will see it when your website loads. If not you will see a generic courier font.
Setting a Font Family in CSS
In order to control or set a font family (list of typefaces to display) in your theme open the theme’s style sheet (style.css). Here you can add a font family, set the colour, the size and other aspects of your font. The following example sets the fonts in the sidebar menu, in the style sheet set 1em high (em is a scalable unit for fonts), and sets the colour to blue:
#menu {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:1em; colour:blue;}
By setting more than one typeface in the font family; if the user viewing you site doesn’t have Veranda then Arial will take over. Likewise, if they don’t have either Veranda or Arial, Helvetica will be seen. If none of these fonts are present then the default typeface sans-serif takes over. By using a font family, the designer controls the fonts with a preferential list of choices. This add a more consistent “look and feel” to the design.
Changing Fonts in WordPress
WordPress themes use fonts in a variety of ways and they are not always consistent. Preset fonts usually depends on the theme’s creator and the needs in designing the theme. Typeface varieties can be found in different areas of the website, one font in the header, another in the sidebar, and another font style in the content area. Not finding these fonts and where to change them can give you a quite the headache when it comes to customising a theme. But fret not, there is an easy solution especially if you are not well versed in CSS Style Sheets.
Here is one simple way to change fonts in WordPress that is virtually painless. This requires downloading one of the plugins in WordPress called easy Google fonts.
Easy Google Fonts is a FREE WordPress plugin that you can install to help you change fonts easily without editing CSS Style sheets (at least most of the time).
How to use it?
Step 1:
Simply download the plugin from WordPress and install it.
Step 2:
In WordPress click on ‘Appearance’ and then select ‘Customise’.
Step 3:
From the menu list click on ‘Typography’; which you added from Easy Google Fonts.
Step 4:
From the menu choose the fonts you prefer. All the headers are numbered and can be changed. Choose a new font from the dialog box. Paragraphs represents all text bodies on your website. So the font you choose here will reflect in all content areas of body text.
Step 5:
Click ‘Edit font‘. Choose font style, such as Latin, and then scroll through all the fonts that are available. You can change the size, colour, line height, etc.
Easy Google Fonts is user-friendly and allows fonts to be completely customisable. Note: when using this tool, changes made to Paragraph settings are global changes.
Using CSS with Easy Google Fonts
In order to change the Fonts of the Navigation menus and some headers, you will have to use a bit of CSS and create Font Controls in WordPress so that they can be edited with Easy Google Fonts.
Here’s how in 10 steps:
Step 1:
Using a Chrome browser, navigate to the Chrome store to download 2 plugins.
Step 2:
Download and install WhatFont and Firebug from the Chrome Store. WhatFont enables you to use your cursor to determine which fonts are used on a website. Firebug enables you to look at the Coding of a website.
Step 3:
In Chrome open your website’s published page. Initialise WhatFont. Hover your cursor over the text on your page to identify the current font.
Step 4:
For example, if you wish to change the font of the Navigation Menu, identify the font in use. Close WhatFont. Open FireBug.
Step 5:
Once FireBug is open, the page’s source code will open in a panel below. At this point you will need to find the Style element that controls the font for your Navigation Menu. In the header bar of the panel select CSS and choose ‘style.css’ from the drop menu.
Step 6:
Open your browser’s search bar. On PC ctrl+F, a little dialog box will open at the top. Type in the name of the font you need to find. Where ever you use a font it will show up in the source code panel.
Step 7:
Click through until you find a code that has ‘navigation’ in the title for example: {main-navigation a} highlight the title and copy it.
Step 8:
Go back to your WordPress tab. Select > Settings > Google Fonts and then on the Edit Font Controls tab in the field labelled ‘Control Name’ name it ‘Navigation’. Then in the field under ‘Add CSS Selectors’ paste in the CSS class: {main-navigation a}. Select the box under ‘Force Styles Override’. Finally click ‘Save Font Control’.
Step 9:
Once saved. Go into your Customiser. Customiser > Typography > Them Typography.
Step 10:
Select the drop box ‘Navigation’ and now you can edit the font, the size, colour, position and everything of your Navigation Menu.
Best Fonts for the Web
Now that you have a better understanding of how to change fonts easily in WordPress, be sure to test that the fonts you choose for the content of your blog/website are legible.
Legibility on-screen
Some fonts are more legible than others on the screen. A traditional font such as Times Roman is considered one of the most legible on paper, but at screen resolution its size is too small and its shapes look irregular. Screen legibility is most influenced by the x-height (the height of a lowercase “x”) and the overall size of the font. To find out more on common mistakes to avoid read our previous article on common webpage design mistakes.
Times New Roman is a good example of a traditional font that has been adapted for use on computer screens. A serif font like Times New Roman is about average in legibility on the computer screen and has a moderate x-height. Times New Roman is a great font to use in text-heavy documents that will probably be printed by readers and not read from the screen. The compact letter size of Times New Roman also makes it a good choice if you need to pack a lot of words into a small space.
Designed for the screen
Fonts such as Georgia and Verdana were designed specifically for legibility on the computer screen; they have exaggerated x-heights and are very robust when compared to more traditional typefaces in the same point size. These screen fonts offer excellent legibility for reading web based content. However, the exaggerated x-heights and heavy letterforms of Georgia and Verdana sometimes look massive when transferred to the high-resolution medium of paper.
Conclusion
Changing fonts in WordPress can be easy and beneficial for you to ensure that your content looks aesthetically pleasing and legible for your users. The good thing about using Easy Google Fonts in WordPress is that all the fonts listed are adapted for computer screens, and make for easy reading.
