Anyone who has been using the Internet for a few years will remember the bad old days when sites were very limited as to the range of fonts they could use. If fonts weren’t on a user’s system, then they couldn’t be displayed by browsers. If designers wanted to do something fancy, they were limited to using images or Flash, both of which are undesirable for a variety of reasons, not the least of which is that having a site’s text in either of those formats is terrible for search engine optimization.
A major part of the evolution of modern web design has been the development of tools that make it much easier to design sites with proper typography. Typography and font selection has an enormous impact on the overall aesthetic of a site, as well as its readability.
In the last few years, web fonts have revolutionized online typography. Web fonts are fonts that are located on servers on the Internet, and included in a site through CSS or Javascript. It doesn’t matter whether the user has a font on their system, because the browser will download them from the server. Web fonts enormously increase the typographical scope of a WordPress site.
Before we go into the best ways to get web fonts onto your page, a word of warning: just because you can use dozens of fonts, doesn’t mean that you should. Two fonts should be considered a safe maximum for most purposes; perhaps a serif and a sans serif for headers and text. Unless you’re a design whizz (you probably aren’t if you’re reading this) trying to combine too many fonts will lead to a cluttered, inconsistent and untidy looking page. Check out this article from Smashing Magazine for some great advice on combining typefaces for the best effect.
Probably the best free source of web fonts is Google Web Fonts, with over 600 different typefaces to choose from. The interface is very simple to use. You can browse through the available typefaces, seeing what they look like at various sizes and as headlines or blocks of text. When you find something you like, you add it to you collection before reviewing everything you’ve selected. If you’re happy you’ll be given a snippet of HTML (JavaScript) to add to your page and some CSS for your stylesheets.
You can opt to add these directly to your WordPress site if you’re familiar with web development, but it’s far easier to take advantage of one of the many plugins that will do the job for you.
WP Web Fonts
This plugin is a little bare bones but it gets the job done. Once you’ve chosen the typeface you want in the Google Web Fonts Interface, copy and paste the code snippets into the WP Web Fonts dialogue, add some CSS styles, and you’re done.
WP Google Fonts
If you’d rather not tangle with CSS then this is the plugin for you. It features a comprehensive control panel with drop downs for choosing fonts and the ability to pick which HTML elements to apply your choices to.
About Graeme Caldwell — Graeme works as an inbound marketer for Nexcess, a leading provider of Magento and WordPress hosting. Follow Nexcess on Twitter at @nexcess, Like them on Facebook and check out their tech/hosting blog, http://blog.nexcess.net/.
