Selecting a Font
Chris Hardee | | Comments closed
If you want to manually change the font of your theme, it generally is not an easy task. In additional, many fonts costs money or even a subscription in order to work. We generally recommend Google Fonts, as they are free by design in both terms of money and no restrictions, and they have an excellent repository of clean usable fonts.
You can browse Google Fonts to locate a good font, but actually getting that font working with your theme normally requires a bit of work. Thankfully, we have found a good plugin we can recommend to easily add the font you want: enter Easy Google Fonts by Titanium Themes.
Easy Google Fonts
To begin with you will need to install the plugin, please see our plugin install guide on how to install it, but be sure you are installing Easy Google Fonts by Titanium Themes.
To begin, go to Appearance -> Customize, as you would if you were customizing your website. Here a new customization control will appear labeled Typography. Clicking on this control will bring you to a new menu where you can select which set of typography you wish to change. By default, it will have a Default typography set. You can create more my going to the plugins settings in your dashboard.
Under any of the default or otherwise typography menus, you can select which element you wish to change.
Paragraphs – This is the normal paragraph text you see throughout the site. In fact the text you are reading right now is paragraph text.
Heading 1 through 6 – These are headings for your site, which means the titles to your posts and any sub-headings. Every should have a Heading 1, but only some pages will have Heading 2 or 3. Rarely will you need to change the style of Heading 4 through 6, as it is uncommon for those headings to appear at all unless you had an exhaustively long post filled with subsections and sub-subsections.
Clicking the Edit Font dropdown will bring a submenu that will allow you to select the actual style.
Script/Subset – Controls which type of script the font family is under. You likely won’t have to change this to anything other then Latin, the default, but you can select from a variety of non-Latin scripts.
Font Family – Here is where you select the font you want to use. I would recommend browsing around the Google Fonts website to find a font you like and viewing the different weights and styles that are available.
Font Weight/Style – Controls how bold a font with, with higher numbers (700 – 800) being bolder and lower numbers (200 – 300) being lighter/thinner. Additional each will usually have an option if you want it italic or not.
Text Decoration – Controls if you want this font to be underline, strike-through, or over-line. Generally unneeded as these decorations have very specific typographical functions.
Text Transform – Controls if the font will be automatically Capitalized, lowercase, or UPPERCASE.
Clicking on the Appearance tab will allow you to change some of the font’s size, color, and spacing. You can play around with colors, size, and spacing but if you’d like to revert back to the theme’s default: click on the Reset link for each control you wish to reset.
Font Color – The color of the font, you can select a hue then change the brightness.
Background Color – This allows you to select a background color for the font. Think of it as a sort of ‘highlighter’ effect (highlighting printed text using a highlighter marker), which as you can imagine has a very specific effect and is not generally recommended to be changed.
Font Size – Controls how big the font will appear in pixels (px), using the slider to adjust the size.
Line Height – Controls the space between each line, in pixels (px).
Letter Spacing – Controls the space between each letter, in pixels (px).
This tab controls some of the positioning of the font. This includes margin, padding, and borders. We generally do not recommend changing any of these values, unless you are an advanced user and know what you are doing, as Viability themes are carefully designed around specific margins and paddings. Even adding a border can cause unwanted behavior.
All additional Headings act the same as changing the paragraph font. Once you are happy with your changes, click on the Save & Publish button at the top to save your settings.