On today’s episode, we are going to talk about custom fonts for your WordPress website, right here on Your Website Engineer podcast episode No. 326.

Hello, everybody. Welcome back to another episode of Your Website Engineer podcast. My name is Dustin Hartzler and today we are going to start a month-long series on small tweaks that we can do to our website to just improve them without having to redo our entire sites. So, this week, we’re talking about custom fonts, but first, I got a couple announcements for you.

The first one is the very popular OptinMonster. It is an email capture tool that you can use with most email service providers that are out there. They are now announcing a new welcome mat page slide effect for fullscreen optins. This is one of those ones where you’re on the site for just a few seconds and then the whole page scrolls down, or you go to the homepage for the very first time and before you can do anything it asks for an optin. While sometimes this is annoying, depending on how your website is setup, or if you’re in the middle of the article and this thing slides down it gets to be kind of annoying, but it really works and there’s been proven studies that this really will help to boost and build that email list. So, if that’s something that you are using OptinMonster already for or you’re looking forward to doing this, you definitely want to check out the new welcome mat within OptinMonster.

I’ve got a link in the show notes for this so you can read the whole article over at OptinMonster.com. This is also a feature built into SumoMe. So, if you want a free alternative, you can go ahead and use that. That’s kind of where this whole premise started from, was from the SumoMe plugin and now they’ve brought it over to OptinMonster. OptinMonster’s got a lot more cool things that you can do than SumoMe, but we’ll talk about that in another episode.

The other piece of news that I want to share with you today, it comes over from the Sucuri.net blog. Sucuri is a website or a service that helps to monitor your website to make sure there are no injections of malicious intent on your website. This article is a SQL Injection Vulnerability in the NextGEN Gallery for WordPress. So, they’re looking at previous versions from version 2.1.79, that’s the stable release, but if you have something that’s previous to that, you want to definitely go ahead and update that plugin. Like I said, it’s the NextGEN Gallery and you’re especially critical if you’re using the NextGEN Basic TagCloud Gallery on your site. So, you want to definitely check that out. Again, there’s a link in the show notes for this as well so you can read the entire article.

Alright, moving on to Is There a Plugin for That, there are more than 48,000 plugins in the WordPress repository and this one is really cool. This is one that I haven’t seen before or even heard about, but I thought this was a really neat one especially come tax time here in the United States. This is one called Calculated Fields Form and this is a plugin for creating a form with dynamically calculated values and displays results. So, it’s essentially an embedded Excel spreadsheet. You can create forms that automatically calculate fields, you can build finance calculators, you can do quote calculators, you can do bookings calculators, date calculators, you can do health and fitness tracking and calculators. So, it’s really cool.

It’s basically like building an Excel spreadsheet and having it on your website and it’s interactive where people can add values and they can calculate things. So, if you wanted to create that How Do I Pay Off my Mortgage Faster calculator, you could go ahead and build that and then they just put in the numbers and it automatically spits out the results, which is really nice. It’s a cool plugin. It’s got more than 30,000 active installs and 119 5-star ratings. So, if you have any need whatsoever for some sort of calculation on your website to be dynamically driven based on user input, I would definitely check out this plugin, Calculated Field Form in the WordPress repository.

Alright, today we are going to dive into the first segment of this month. It’s the first week of the month, first day of the month actually, and I want to talk about this month of small, little changes that we can make on our WordPress sites to just improve them. We don’t necessarily have the budget or the time to make these full-blown changes to our WordPress website and so these are some small tweaks over the next five weeks that we can do to give our website a new life without having to spend hundreds of hours and hundreds of dollars to update our website.

So, today, what I want to talk about is updating our and taking a look at our typography or our fonts that we’re using on our WordPress website. So, I’ve got a handful of plugins that we’re going to talk about that you can use to bring in these additional fonts, but first of all, let’s talk about the fonts and what about them, like how to give your website a facelift when it comes to font and typography. So, the big thing is fonts really make a big deal. They can make your site look dated very quickly. They can make your site look modern very easily. It’s a way to just really add new life. It’s a way to add some new branding or to match your branding with your logo and things like that. So, let’s go ahead and take a look.

The first thing we want to do is we want to actually evaluate our WordPress current typography. Before we try to tackle this makeover and trying to go in and change all of our fonts, let’s go ahead and just assess what we’re working with first. This will give us an idea of any weaknesses that may lie and how much flexibility that we have to make changes. So, the first thing that we want to do is we want to see where did our current fonts come from: are they just the default fonts within the WordPress theme or were they chosen on a whim? Where they something like, “Oh, this font looks good.” Was it built into that theme? While it may look good enough, if it’s not hand-selected to be the perfect font to work with your brand’s style, then it’s probably not the perfect font for your website.

Another thing that we want to look at is to make sure that our typeface is complete. So, let’s say we’ve selected a high-quality font face that meshes well with our website, but we don’t know if it has all of the characters present. So, you want to make sure does it A, B, C, D, E, F, G – all the way through the alphabet, upper case, lower case? Does it have all of the numbers? Does it have all of the symbols? I have a link in the show notes for all the text that you can highlight and then you can copy and paste and put those inside of a post or you can use the font editor or whatever on your computer and just make sure that all of the characters are available. You want to make sure that you’ve got the dashes, you’ve got question marks, you’ve got semicolons. If you are in a language that’s not English and you want to make sure that you have the upside down question mark or the upside down exclamation point or all those different symbols that are part of your native tongue, you want to make sure that all of those are there as well. So, you want to make sure that the typeface is complete.

Then, you also want to check for readability issues. If you’re working on a Mac, you may want to look at FontBook. It’s a program that you can install and you can test for readability issues. You can check for a complete set, so you can add all the characters and see what they look like. You can preview the font digitally to sense how it will look on your website, and within FontBook, you can even just do this within like Microsoft Word, you can copy and paste or you can add your font to your computer and then you can copy all of these texts and then you can print it out to see what it looks like actually printed. FontBook is a great tool to manage all of your fonts and you can organize them and whatnot so you want to definitely check that out.

Then, another thing that you want to do is you want to review your typography on mobile. What does that font look like on mobile? Is it too big? Is it too small? Is it too hard to read? Is the coloring not right? You want to just go ahead and take a look at that. There’s a few online tools called Responsinator which allows you to check your website for responsive compatibility easily. This same responsive checker can review the site’s typography for the mobile-friendliness as well. If you go to that, there’s a link in the show notes for this. You basically just go in and you type in your website URL and it will go ahead – I’m gonna do this right now so I can see what it looks like for YourWebsiteEngineer.com.

It’s pulling it up on an iPhone 5 portrait with a width of 320. It goes ahead and it loads my mobile site. It turns it on its side. It loads it in landscape and then it pulls in an iPhone 6, I put iPhone 6 landscape, and then it does an iPhone 6 plump landscape. I’m not sure what plump means. Then, Android Nexus, it pulls in an iPad, it pulls in an iPad portrait, iPad landscape, and so you can go and you can just look at all of these very, very quickly and you can see. You can scroll through your website, you can navigate it. It’s basically like a wrapper for your WordPress site, which is really nice. So, that is something you want to definitely check out when you are looking at your fonts and your typography.

Then a couple more that I have here on my list is your font color reader-friendly? You want to make sure that – you may have chosen yellow since it’s part of your brand and your style, but yellow is very, very hard to read on a white background. So, you just want to make sure you pick the right color. You can experiment with colors. There’s a link in the show notes for a material design palette that will allow you to pick a couple colors and see how they correspond with each other and how they play off each other. So, whichever branding colors that you choose, you want to choose a primary branding color and a secondary font color that are always shades of black or gray to make it easiest to read.

Then, the last thing is you want to check to make sure that your typography is accessible. Web developers know how to make websites accessible and that’s built into most of the themes that you buy off the shelf, but if you’re really giving your typography a universal friendliness, then you want to pay attention to factors that may affect those who are visually impaired or color blind. So, you can run through a website called Color Oracle and this will simulate the website who appears to be colorblind and then the review of Color Oracle will give you recommendations made by the American Foundation for the Blind and it will give you tips and tricks on how to make your print more readable. So, that’s another thing, another tool that you can run your website through.

So, those are some of the checks that we need to do to make sure, just kind of evaluating our current state or evaluating that font that we may want to choose and may want to go to. So, a couple of best practices when it comes to picking the right font and the typography best practices, some of the rules to follow are you want to match your brand. So, you want to select a font that follows the design rules you’ve already established for your brand. So, maybe if your logo has a font in it, maybe you want to use that same font in places across your website, things like that. You want to keep it simple. You don’t want to use any more than two or three typefaces across your website. It’s okay to use a font face that’s a little out of the ordinary, just make sure it’s easy to read and you don’t use it for really crucial things. You don’t want to have a script font for your text of your blog post or text on a page, but you can use a script font to highlight or accent different pieces of your text on your website.

You want to maintain consistency. So, you want to use consistent font throughout the site. All headings should use the same font, size, color, and style. That goes for the body text and navigation text, hyperlink text. All of those pieces of text should be exactly the same across your website. You’ll want to create contrast between your font types, so you want contrast between headings and body text. You can do this by pairing a Sans Serif font with a Serif font or a cursive font with a written one. Just make sure the contrast is striking and not a point to be off-putting. So, you don’t want to have old-school cursive with the new Pacifico cursive. That’s not gonna create good contrast at all.

You want to check the color, is another thing. You want to use blacks and shades of dark gray for best readability. There’s also background colors to take into consideration as well, so you want to pair colors accordingly. You want to use light text on a dark background or dark text on a light background. You want to use all caps sparingly. All caps can be very difficult to read or it may give off the vibe that you’re shouting at people that are reading your website. So, if you have to use it, use it very sparingly or to highlight very important parts of your website.

You want to establish a hierarchy. Just because the general rule is to use a font size of at least 16 points, that doesn’t mean that all your typefaces need to stick that minimal limit. Headers, subheaders, body text should be sized to establish clear hierarchy of terms and what’s most important. So, you don’t want to say like, “Oh, my body text needs to be 16, but my heading text is only 12.” That doesn’t make any sense. You want to make sure that the headings are always the biggest, subheadings are a little smaller, and then body text is the smallest of the fonts on your website and it should be no smaller than 16 points. If you have a font that you have to get and 16 looks really, really small, then you probably want to bump up either to a higher threshold or a different font altogether.

You don’t want to forget about spacing. That’s one of the other things that can really help or hurt the readability of a website. If your lines of text are too close together or they’re too far apart, it could make it harder to read. So, you want to make sure that – and I don’t know if there’s an actual standard for this, but we want to make sure that we are looking at our sites and making sure that yes, this makes sense to read and it’s possible to read.

Then, you want to A/B test before making a commitment. While you may not be 100 percent sure on what the typeface is, you can A/B test it. So, you can run it on a couple pages and see. You can look at the bounce rate or how long people are on the website. You can do all kinds of tests like that just to see if this is the correct font for your page.

Now that we’ve determined that we want to have a new font, now how do we do this? There’s a handful of plugins that are out there and some of them are free in the WordPress repository. There are other ways to do this. I mean, there’s dozens of ways, obviously, to do everything, but I just want to run through a couple plugins that may be able to help you out quite a bit and make it very easy and consistent to add a new font to your website.

So, the first one is called Font Organizer. This isn’t just a plugin about better organization. It allows the WordPress users to change and use their typography. So, you can upload any font of your choosing. Once it’s in WordPress, then you have the ability to assign different fonts to different elements like header tags or links or things like that. You save time from having to repetitively change fonts while composing content. So, this plugin allows you to do that along with updating snippets for text to specialized fonts. So, you can accomplish everything within the WordPress dashboard within the Visual Editor.

There’s one called Use Any Font and this is a well-reviewed and popular WordPress plugin. It’s a great tool for getting new fonts onto your WordPress website. It uploads the fonts; it keeps them organized and automatically assigns them. It’s very similar to the way that Hive is set up and works.

There’s a service called Type Kit and you can use Type Kit fonts for WordPress. This is through Adobe and Adobe Type Kit. It’s just an implementation where you can use online fonts by Adobe and you can bring those into your WordPress website. So, they’re hosted somewhere else and then you can go ahead and add those to your WordPress site.

There is one called FontPress and it is the only premium typography plugin that’s on this list that we’ll talk about today, but it’s definitely earned its spot. It helps WordPress users add a mix of fonts from their various sources including Google, Adobe, Font Faces, Adobe Type Kit, CSS, Early Access. In addition, the plugin gives better control over typography rules, responsive content displays, and previews for all fonts in one place. It’s a premium plugin, but it’s got all the bells and whistles.

We’ve got Easy Google Fonts and this plugin won’t allow you to do anything but Google fonts, but it’ll help you accomplish a lot with Google fonts. So, it will allow you to pull in the fonts coming from Google and you can test them on your site in real-time without actually having to change them. So, you can view them in the Customizer and it works really, really well. So, those are some of the plugins that I wanted to share with you.

We’ve got other plugins that – there’s one called Font Resizer that will allow you to resize your fonts very quickly and easily so you can test them. There are hundreds of these plugins out there. You can actually select your Google font on Google, like you can go into Google.com/fonts and you can look up your fonts and you can pick them and it will actually give you some code that you can add into your header or you can put in your footer so it will load the fonts properly. You probably want to put it in your header so it loads first so those fonts will load instead of the backup fonts that are defined in CSS. Then, you can define them in your CSS file of here’s the font file that I actually want to use. You can do all of this, but these plugins make it really simple and really easy.

So, that’s kind of the overarching goal of this week, is just to go in, evaluate our fonts, make sure that our fonts are something that fits well with our brand, they’re easy to read, they’re easy to read on mobile, and they just complement our brand. So, that’s my action item for you this week is to go out and do this any just take a look and see is my font old or outdated, and if it is, let’s go ahead and add one of these plugins and add some new updated custom fonts to our WordPress website. So, that’s what I want to share with you today. Thanks so much for tuning in and next week we’ve got more great tips and we’re gonna accomplish something else on our WordPress site. So, until then, take care and we’ll talk again soon. Bye-bye.