WordPress Typography: How to Add Google Fonts to Your WordPress Theme
If you love your current theme but would like to just swap some of the fonts it uses or have more fonts to select from when writing a new post, then this guide to the different WordPress font management options is just for you.
By installing a free plugin you can gain access to large repositories of free fonts and be able to easily change which fonts your WordPress theme uses. Find out which plugins are the best for your needs and where to get additional fonts for use on your website.
Did you know Google now has a font directory that contains hundreds of free, open-source fonts optimized for the web? You can browse the Google Fonts website and preview all the fonts available and then make a list of those you’d like to use on your site.
Regular website users have to add some code to their site and integrate the fonts into their CSS files, but for WordPress users there is a free unofficial plugin available called WP Google Fonts. Using this plugin, it is possible to simply select the fonts you want to use on your site from a drop down list and then choose the elements you’d like to assign those fonts to, including headlines, paragraphs, block quotes or lists. You can also add your own custom CSS and select which character sets you want to use.
Impact on Site Load Times
The plugin only lets you add six fonts from the Google directory to your site which is a good thing as too many fonts can slow down the loading times of your WordPress site. Thankfully, when previewing and selecting fonts on the Google Fonts site, you can see the impact your choices will have on page load times, helping you to make an efficient selection of fonts.
It is recommended to only select the fonts you will definitely be using on your site and to also only choose the styles you will be using such as normal and bold rather than all the options available for each font.
The free WP Google Fonts plugin doesn’t allow you to preview the fonts inside your WordPress dashboard so unless you know the exact fonts you want to use already, you will have to browse the offerings through the Google Fonts website.
As the list of fonts available from Google continues to expand, the developers of this plugin are working hard to keep it updated to reflect the list of options. The plugin works well and is easy to setup making it a quick way to change the fonts used on your WordPress theme without any difficulty.
Supreme Google Webfonts
This is another free plugin that works with the Google Fonts service but it allows you to select the fonts at post level, rather than for the theme as a whole. Once the plugin is installed, two new fields are added to the post editor which allows you to select fonts from the Google Fonts directory and change the size of the text. The drop down font list allows you to preview each option which saves you having to go back to the Google Fonts website to see what each one looks like as is the case with the above plugin.
While this plugin does what it sets out to do, as it provides access to all the fonts in the directory, it does slow down the page loading times somewhat, so you will have to decide whether that is a sacrifice you are willing to make for great fonts for your WordPress site.
This free plugin lets you use fonts from Google Fonts on your WordPress site as well as those from Typekit, Fontdeck and Font Squirrel which are premium font directories (apart from Squirrel which is free).
Once the FontMeister plugin is installed, you need to enter the API keys of the services you want to access fonts from. Strangely this also includes the Google Fonts service as is not the case with the other two plugins featured previously. The API key for Google Fonts is free but finding it and entering it are extra steps in the setup process that seem unnecessary.
When using this plugin with Font Squirrel, the fonts must be downloaded through the plugin page on your WordPress dashboard before they can be used on your site. This process is simple but could be time consuming if you want to add lots of fonts, although this isn’t recommend. You can preview the fonts you’ve downloaded and added to your stack or font list and customise them by entering selectors.
If you don’t plan on using the other font services that this plugin works then I wouldn’t recommend it as the other plugins for use with Google Fonts are much easier to setup and use.
Despite not being updated for a while, the wp-Typography plugin works with version 3.5.2 of WordPress. Once installed this free plugin gives you more control over how the text on your website looks that with a regular WordPress installation.
Things you can do with this plugin include transforming straight quotes to typographically correct characters, transform hyphens from minus signs to appropriate dashes or proper hyphens, force diacritics where appropriate for words like crème brûlée and define the wrapping settings for URLs and windows of text.
All the options are done through the settings page of the plugin and are applied site-wide to your WordPress site.
This plugin is great if you want precise control over how the typography settings of your WordPress site and if you would like an easy way to insert symbols, fractions, exponents and other mathematical characters.
If your WordPress site doesn’t quite display text in the way you would like it to, there is now no excuse for not doing something about it. These free plugins allow you to select fonts on a post by post basis or set them at site level using free services like Google Font and Font Squirrel as well as some of the premium font directories out there.
Some people say web design is 95% typography and whether you agree with that statement or not, it is one of the most important visual components of any website.
Hopefully this guide to getting additional font will give you some options for easily editing the appearance of your WordPress site.