There are only a handful of fonts that are common to most web browser and operating system configurations. If you try to use a different font on your website, it may not display properly for your visitors. This could either be a serious design problem or seriously limit your ability to customize your website. You have likely seen websites with fonts that look out of place; in many cases, this is because the web designer decided to use an uncommon font that you don’t have on your computer.
When you aren’t using one of the standard fonts, you need to be reasonably certain your visitor has the font installed on his or her computer, or you need to make your visitor download the specific font you are using on your website. Normally, this would require some HTML and CSS coding, but an easier solution for WordPress websites is to use the WP Google Fonts plugin. It gives you easy access to the fonts in the free, web-based Google Web Fonts directory. The WP Google Fonts plugin will load the fonts you select, so you can apply them to your website text. There are over 100 publicly available fonts. You can view the list at the Google Web Font directory.
Contents
Basic Usage
After installing and activating the plugin, just go to the Settings > Google Fonts menu. Select the first font you want to use, and then check the boxes next to the text elements you want to apply that font to. You can apply it to:
- Default text (the body element)
- Headline levels (H1 through H6 tags)
- Blockquotes
- Paragraph text (the p element)
- Lists (both numbered and bulleted)
You can select up to 6 different Google Fonts this way. For example, you could set your default text to “Tangerine,” your H1 and H2 to “Droid Sans,” your lists to “Inconsolata,” etc.
Advanced Usage
If you want to use a Google Web Font for a different text element, such as your header text or sidebar headline, you will need to know some CSS. First, you need to select the font you want to use from the drop-down. Then you need to write the appropriate CSS code in the Custom CSS box, identifying the element you want to change and specifying the font you selected from the drop-down.
You can also use the Custom CSS box to include CSS code unrelated to your fonts, and it will apply for all visitors to your website. This feature is useful for making style changes without the risk of editing your theme files directly.
