With Google expanding to everything from social networking to amazing web tools, it is no surprise that they have also made headway into the world of fonts. A quick visit to Google Fonts will give you a massive online library of over 600 families in fonts. And if you use WordPress and want to break out of the limited font options it offers, there are simple ways to do it without wasting hours of your time.
1. Use Your Theme’s Options (best)
Some themes allow you to choose what sort of font you want in its customizer. Both free and paid themes can have this option. For example, the Flash theme is a popular free choice due to all of its options. You can find where to set fonts by going to Appearance > Customize > Flash Theme Options > Google Fonts. Choose your preferred font and hit publish. Many other themes have similar options. Read on for themes that don’t or if your theme doesn’t offer the font you want.
DESIGN TIP: We like Open Sans, Roboto, and Lato for the body font.
2. Use a Direct Link From Google Fonts (good)
For those of you with a reasonable comfort in HTML, the solution is a simple copy and paste. First, again go to the Google Fonts homepage, browse around and find a font or two that’s to your liking. Once you’ve chosen your font or fonts, click on the plus sign at the top right of the font. It will open a window on the bottom of the page. Expand the window then follow these instructions.
- Expand the window that says “1 Family Selected.”
- Make sure you are under the Embed Tab
- Find the code under Standard, in this case for Roboto font
- Copy the code, in this case the highlighted code that begins with “link href…”
- Go to your WordPress Dashbard > Appearance > Editor
- Look for the file that contains your < head > tag, usually under header.php
- Paste the copied code directly underneath the < head > tag.
- Hit “Update File” on the bottom of the page to save the changes and finalize installing the font.
DESIGN TIP: Be sure to make a backup of your header.php file just in case.
You may then assign the font via your CSS. Most WordPress themes have this option under Appearance > Customize > Additional CSS. This is where the code marked “Specify in CSS” comes into place. Simply copy/paste the code here. Then assign it by adding the element you want to assign the font to. For example, h1 for Header 1, h2 for Header 2, p for paragraph text, etc. The final code for paragraph text for example should look like:
p {font-family: ‘Roboto’, sans-serif;}
Change out the “p” value for whatever text class you want to assign the font to. Don’t forget to Publish your changes to make it official.
Get a Plugin
If the above is too complex or you dread the thought of having to constantly paste the desired font code, there is another option. WordPress itself has a growing number of plugin options that can help you modify your site in a number of ways. Sure enough, there are several plugins for adding Google Fonts. We do not recommend using plugins unless necessary as they can slow down your site.
More on WordPress
Don’t use the same old fonts as everyone else. Stay a step ahead by using the best in Google fonts to best display your work. If you need help getting your website, WordPress, or other platform looking its best, contact us.
