fbpx

Beginner’s Guide to Using Custom Fonts on WordPress

[gp-social]

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)

serif fonts have a small line attached to the end of a stroke in a letter, sans-serif fonts - sans is French for "without", therefore sans-serif fonts have no serifs

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.

customize your google font family
pay attention to the load time when making selections

here is your embed code and CSS rules

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!

Mindy

Mindy has been helping business owners with their online presence since 2010. Her passion for education (both learning and teaching) keeps her busy staying on top of the latest in order to best serve, and educate, her clients.

18 thoughts on “Beginner’s Guide to Using Custom Fonts on WordPress”

  1. I haven’t really played around with fonts on my site, Mindy. It looks like so much fun and what a vast choice there is. I’m bookmarking this so I can follow your steps when I get a chance to experiment a bit.

    Reply
  2. I guess my concern is.. well two of them… 1 that my fonts won’t be acceptable everywhere and that I have to find a plan b, and maybe c… and then 2 that I would obsess over it for so long that I’d never decide and then when I do.. I’d revert back to #1. Great points though… and so easy to understand and follow, of course.. cuz you are MY MINDY!

    Reply
    • Haha, yeah,obsessing for so long! It really is something you need to carve out time for – so many options! I went nuts searching for fonts for my logo and then my website! And thank you for pointing that out – about being acceptable everywhere. I did mention that at the beginning of the post but forgot to elaborate at the end as I had planned – going to edit the post now. (sorry, yes, you will need to pick another font as a fall-back!)

      Reply
  3. Typography is one of my favorite design aspects. I launched a new site for a client in February where I used a premium font. What a difference it made to the whole feel of their site! I design using the Divi theme, so it was easiest to use a plugin (don’t cringe!) to get the font installed. Terrific tutorial! I’m sure many will appreciate the knowledge to transform their WordPress site with a new font. πŸ™‚

    Reply
    • It is amazing how such a seemingly small change can make such a huge difference, right Meghan!? Yes, I’m cringing! LOL, thinking about load times with all those plugins! Happy to hear it made such a difference!

      Reply
  4. Thanks for this information I have wanted to use different fonts for some time but had no idea how to get it done. Excited now to explore my options and install some alternate fonts

    Reply
  5. It is amazing how I selected my fonts without the slightest knowledge of this. I use a serif (Droid) for my headers and a sans serif (Lato) as the main font on my site. Thanks for the knowledge and insight about it all. Thank you Mindy! You are a WordPress rockstar.

    Reply
  6. I’ve noticed how certain sites stand out because of the fonts and colors they are using. In today’s visual obsessive world this is something to really consider. Thanks for suggesting Google fonts and the Colorblinding extension. We forget how many are colorblind and missing the effects we worked so hard to achieve.

    Reply
    • Yes, they do stand out, don’t they? And on the other side, there are sites that stand out for the wrong reason – because their website is hard to read because of the fonts they have chosen.

      Reply

Leave a Comment