Beginner’s Guide to Using Custom Fonts on WordPress

New Font, New Look

So I tend to write blog posts about questions I get asked a lot or see being asked in my groups online. This past week there seems to be quite a bit of talk about custom fonts. Should you use the fonts that come with your WordPress theme or change them up to match your branding and personal style? Did you know you could change the fonts out? Well, here I am going to tell you how to add custom fonts to your WordPress website to breathe some new life into it! You’re gonna wish you’d done this a year ago!

First Things First – Choose Your Fonts

You’re probably thinking “I don’t know what fonts I want! How do I choose!?”
Well, there are a few ways, but first a couple of tips:

• want funky? leave it to the headlines, and even then, make sure it is easy to read
• body text should be crisp and clean – sans-serif fonts are usually recommended for use on the computer, with the exception of headings – serif fonts tend to read easier in print
• keep in mind that not all fonts will be read in all browsers, so make sure to have a standard fallback (or two)

Getting Inspiration

So just how to decide which fonts you would like to use on your website?

• You can start by browsing Google fonts, but that can get a bit overwhelming if you don’t know what you’re looking for. Best to save that until after you’ve looked around some.
• Check out what designers have put together in the way of font pairs. You can get ideas of what works well together when trying to pair headlines with body copy, and also get some inspiration for what you really like and shows off your personality. Here are some fun sites to check out:
  • Great Simple has a lot of fun Google Fonts combinations
  • Font Pair has a ton of great pairings for Google Fonts
  • Typewolf has put together a list of what they consider to be the 40 best Google Fonts
• Begin to make note of websites you visit that have fonts that stand out to you – if you like anything, in particular, see if you can find out the font or match it up to something on Google Fonts
• Magazines / Newspapers – maybe not the exact fonts, but you may like the style of their headlines, whether they are thick, bold letters, or and elegant cursive font

You Decided, Now Install It

I’m sure you’ve noticed by now that I am only going over Google Fonts. That is because they are free, have a great variety and are easy to use. I’ll give you other resources to use below.

Choose your font

You can type some preview text in here – especially good if you want to see how a particular letter looks.
Then click the red circle (with the plus sign in it) at the top right corner.
This will add the font to your collection.

Customize Your Font

At the bottom of your screen, you should now see a black bar that says “family selected”. Click on this to open it up, then click on the word CUSTOMIZE. If you will want to use the font in varying weights on your site, you will want to check them off here. I caution to only check off those you will be using (you can always add or delete later) so as not to slow down your website’s load time.

You’ll notice in the 2 images I have here, the first one has only “regular 400” checked off and in the top right of the image you’ll see “load time: fast” in green. The other image, where I have checked off all the selections, it says “load time: slow” in red. Pay attention to that as you are making your selections.

Time to Install

Now click on EMBED, to the left of CUSTOMIZE and you will see the embed code for your website. Copy the entire thing:

and insert it into the HEAD section of your website. If you are using Genesis, you will find this by navigating to Genesis -> Theme Settings and scroll to the bottom of the page, where there are header and footer sections for code. Place this in the HEADER section.

Next, you will want to add the font to your stylesheet. If you are not comfortable with this part, it is best to get your web developer to handle this for you.

Fallback Fonts

*You will notice in this example, Google Fonts is supplying a fall-back font of the generic sans-serif, in case your browser does not support the font you have chosen, which in this case is “Lato”. You could supply a specific font for the browser to look for in case Lato is not available, as you cannot always be sure of what sans-serif font will be loaded. So if you want to make sure Arial is the fallback instead of Helvetica, you would type: font-family: ‘Lato’, Arial, sans-serif;

Here’s a quick getting started guide by Google Fonts.

Color Your Fonts!

Why not add even more life into those new fonts by adding some color? Again, please make sure the text is easy to read. Why not ask some friends and colleagues to view your changes and let you know how they see it? Light grey text seems to come standard with many themes these days and is not easy for those of us with not-so-great eyes to read. Also, consider those who are color blind. Colorblinding is a great extension for Chrome that allows you to view any website as those with different types of color blindness will view it.

If you are comfortable with editing the stylesheet, you will find the hex code of the color you want to use and enter it under the appropriate section. Example: h1 {color: #00c5cd;}

Other Resources for Custom Fonts

• Adobe Typekit has many beautiful fonts. There is a limited selection under their FREE plan. You can choose from a much greater selection if you choose either their Portfolio or Performance plans. If you are a Creative Cloud user, a Portfolio plan is included in your membership.
• You can also create your own web fonts, with fonts that you own, by using Font Squirrel.
• Creative Blog shares a list of 41 free web fonts, with instructions on how to access them.

I would love to see some examples of the fonts you are using! Have questions or comments? Please leave them below. And if you need any assistance, please head on over to my contact form and let me know!