How to Spice Up Your Site’s Design With Google Fonts

The fonts you use on your website’s design can breath fresh air or crush the life away from your writing. In this guide, I’ll show you how how to find the right fonts for your site and add them to your site with the new typography controls in Marketers Delight.

If you’ve ever looked through the Google Fonts library, you already know that the amount of fonts you have available to you can be a bit overwhelming.

Luckily there are ways to narrow those choices down to find the perfect font for your website. That first starts by knowing who you are and what kind of writing style you want to convey on your website.

To Know the Right Font For Your Site, You Must First Know Thyself

For example, if you’re starting a personal blog then you know your writing will be centered around yourself. From that perspective, find a font that you personally enjoy to look at

Or, say you’re writing a news blog with a worldwide audience and a multilingual and older crowd. With this demographic in mind, you’ll want to look for fonts that are simple and plainly displayed.

Maybe you’re writing about philosophy or history and want to emulate a classical feel. Find a nice serif font that reads like an old newspaper and your readers will feel a small dose of nostalgia when they read your words.

While it can be hard to nail down a perspective for a website that can ultimately be ready by anybody from anywhere in the world, it’s just as important to know how to present your words as it is to say them.

But most of all, have fun with it! Thanks to the advances in font technology on the web and the new easy design controls added in Marketers Delight 4.8, finding the right fonts for your website is the easiest its ever been.

How to Find the Best Google Fonts For Your Website

Now that you know clearly what you’re about, let’s dive into the world of the Google Fonts library.

You can see just how many fonts are available for you to choose from, so let’s narrow it down further by defining a few more details:

1. Do I want all of my fonts to be the same?
2. Do I want a serif font or sans-serif font for my body copy?
3. Do I want a serif font or sans-serif font for my headlines?

Because we’re dealing with headline fonts and body copy in our blog posts, it’s easiest to narrow down your font selection choices to serif and sans-serif.

These are the two main styles of fonts and the most easily read for these important text elements on our site.

In Google Fonts you can immediately filter which style of fonts show by only leaving the Serif and Sans-serif options selected in the “Categories” bar.

For quick reference, a serif font is a “classical” looking category that has almost curly looking details at the tips of the letters. A sans-serif font is a lot simpler and the most common font style you’ll see across the web for its easy readability.

Now that your search results are narrowed down, browse through the library and quickly find a font that appeals to you. It’s easy to get sucked up in these pretty results, so try to make your first selection quick to get the ball rolling.

How to Add Google Fonts to Your MD-Powered Website

Now that you’ve found your font, you can now login to your WordPress dashboard and head over to Appearance > Customize.

For this first example I’ve chosen the clean sans-serif Open Sans to use for my body text. All I need to get this font on my site is to copy the name of the font “Open Sans” as listed on Google.

Now let’s go ahead and open up the WordPress dashboard and navigate to Appearance > Customize to launch the live preview Customizer experience.

Once you’re in the Customizer, navigate to Site Design > Fonts & Typography and find the very first section labeled “Body Fonts.”

The Fonts & Typography panel is where you control the global typography for your site and the options in the “Body Fonts” section act as the default fonts for your text elements to use, unless you specify elsewhere.

So let’s go ahead and plug Open Sans into the Font Family field and click the “G” icon to tell MD that you are using a font from the Google Fonts Library.

If you like how that looks, go ahead and press “Publish” to push your new font settings to your site! After that you will have successfully added a custom Google font to your site without ever touching an embed code.

But what if you wanted to use a different font for your headlines? Well, that can be done in the exact same process!

Still in the Fonts & Typography panel, scroll down your control panel below the Body Fonts section to find the font controls for your headline tags (h1 to h5).

By following the same steps as above, only this time for the headline tag of choice, you can control the font properties of your headlines only. These controls are useful for when you want your headlines to stand out even more for your body copy.

For my headlines, I’ll find a different Google font I like called Merriweather, which is a serif font.

By following the same steps as above, I now see the titles of my posts now have a nice new serif font!

Which Fonts Did You Choose For Your Site Design?

By now you should have a clear and simple understanding of how easy it is to add Google Fonts to your Marketers Delight powered website!

Keep in mind that MD adds other controls that let you further customize your fonts, including the font weight, font size, and font style and the rest of the MD design panel which gives you powerful control over your website’s design.

Now tell me, which fonts did you end up picking and how do they look on your site? Post your results in the comments below!