How to Add Flair to Your Site With Google Fonts
How to Add Flair to Your Site With Google Fonts

Back in the good ol’ days of web design, font options were extremely limited and very few were recognized by web browsers.

This led people to, for some unknown reason, default to using Comic Sans to stylize their text.

Thankfully, we have evolved since then and so have the fonts we can use in our web page designs.

While you can always rely on web safe fonts to spice up your site, Google has given us the option of choosing from hundreds of fonts to personalize our text and add flair to our blogs.

The beauty is, you only have to access the CSS code of your site via the WordPress Customizer in order to apply the fonts to your site.

Easy peasy!

Not All Fonts Are Made Equally

Choosing a font for your site can be as arduous as choosing a new wallpaper for your living room. Before settling on a font, you need to take into consideration the style and feel of your blog.

Fonts come in all shapes and sizes, but can easily be separated into 5 categories:

  • Serif
  • Sans Serif
  • Display
  • Monospace
  • Handwriting

Or so Google Fonts organizes them. I would suggest heading over there and browsing these categories to get an idea of what the differences are. Otherwise, I’m going to explain them here.

Serif

A serif is a small line or stroke attached to the end of a larger stroke in a letter or symbol. Basically, it’s the little dooey that looks like it’s helping the font stand up.

Serifs were originally designed for old-school print yet most web developers are staying away from them and opting instead of the smoother look of sans serif fonts.

This is a serif font called Book Antiqua.

Sans Serif

By implication, we can assume that sans serif fonts don’t have that little dooey or stroke.

Sans serif fonts are more modern in appearance and give the text a higher readability factor.

This is a sans serif font called Tahoma.

Monospace

Monospace fonts are kind of cool, because they are designed so that each letter takes up the same amount of horizontal space, as opposed to other fonts where the spacing varies depending on the letter.

This is a monospace font called Courier New.

Notice how Courier New is also a serif font. Some fonts can have multiple characteristics and appear in more than one category.

Handwriting

Handwriting fonts are just as they seem – they appear to be handwritten. There are no web safe handwritten fonts since they vary greatly in design and have a more artistic and fluid look.

These fonts have a more informal, yet elegant, look and feel.

This is a handwriting font called Pacifico.

Readability

Choosing which font to use comes down to the readability of your text. Visitors to your site are more likely to read your content and spend more time on your site if the words are legible.

For obvious reasons, you probably shouldn’t choose a handwriting font for your article’s text. This style of font, however, can be used in an aesthetically pleasing way in your headings.

You may also want to consider mixing fonts for a more visually organized effect. For example, serif fonts can be used to make your headings look more formal while sans serif fonts are great for readable text.

Adding a Google Font to Your Site

Google Fonts is set up in a very user-friendly way.  You can type in sample text and adjust the size and color so you know exactly what the font is going to look like on your site.

Once you’ve decided which font, or fonts, you want to use on your site, just click the little red “+” beside the font name. This is going to save it in a little box at the bottom of the screen that says “# Family Selected”.

To remove a font, simply click the little “-” beside the font name.

The great thing about this system is that little box at the bottom now has all the necessary code you need to apply the fonts you have chosen to your site. All you need to do now is copy and paste them where they need to go.

Using Google Fonts On Your Site

To add the Google fonts to your site, you’re going to head to the Appearance link and click on Customize.

WordPress features this awesome customize option that allows you to make changes to all kinds of aspect of your site without touching the code – and providing you with a live preview as you do so.

While we can’t make changes to the header here, we can play around with the CSS without getting into the style.css file.

Once in the customizer, scroll down on the left-hand side until you see the Additional CSS tab. Pretend to read the any information it may display at the top, click the “close” link, and head to the text box with the numbers down the left side.

My preview display has a bunch of headers, since I used this screen shot over in my article How to Pimp Your Headers. Typically, it will display the main page of your site.

Importing the Fonts

Back at Google Fonts, in that little box that saved your chosen fonts, look in the “Embed Font” section for a tab that says “@import”. We are going to use this code to bring the Google fonts into your site so that web browsers will recognize it.

Up until recently, I used to use the <link> code and add it into the header.php file. What I recently learned is that doing so means that mobile devices and tablets may not recognize the font and display it.

And this way is much easier.

Copy everything between the <style> and </style> tags and paste it into the Additional CSS box in the WP Customizer.

Now the fonts are ready to be used to stylize your text and headings.

Changing the Style of Your Text

In order to add the CSS code, you need to know what you are changing. To keep things simple, I’m going to show you how to change the paragraph text (your article and post content) and the headings text of your page.

In HTML terms, the <p> tag refers to paragraphs while the <h> tags (which need to include a number from 1 to 6) displays the headings.

So in this area, we are going to add CSS selectors depending on the type of text you want to apply the fonts to – paragraphs or headers. Copy and paste which ever selector, or selectors, you need into that box:

p {}

h1 {}

h2 {}

h3 {}

h4 {}

h5 {}

h6 {}

The “Specify in CSS” code over at Google fonts is going to be copied and pasted between the appropriate {}.

For example, if I wanted to change the font of my paragraphs to Gayathri and my largest header to Manjari, I would use the following CSS code:

Adding More Google Fonts to Your Site

If you decide down the road that you want to add more fonts to your site, simply go through the same process but paste the <link> code directly under the one that’s already there.

You can add in the font name to the existing <link> code as well if you want.

You don’t have to necessarily worry about deleting font codes that you don’t use anymore. As long as they are not being applied through CSS, they won’t appear on your site.

Play Around With Font Styles

Have fun playing around with the many fonts Google has to offer. You can get very creative combining font styles to create a unique and personalized look for your site.

Questions? Comments? Curiosities? Please contact me or leave a comment below!

Coding, design, and writing are my happy places. I can lose all track of time when I’m working on my blogs.

I hope here at MNC you will find the answers to your questions and some inspiration to make your blog or site really totally cool!

Learn More.

Latest Posts

How to Use Tailwind for FREE (Pinterest Without Paying!)

Have you been banging your head over your Pinterest marketing strategy and trying to figure out a way to organize your pinning schedule without spending money on Tailwind? Once upon a time, I did. I made up fancy Google spreadsheets that listed all of my blog posts...

Don’t forget to sign up for the FREE Blogger Toolkit!

You May Also Like…

Don’t Ignore Your 404s! What To Do When Site Not Found

Don’t Ignore Your 404s! What To Do When Site Not Found

Want to know four of the most frightening words when you run a blog? 404 Site Not Found This means that someone came to pay your blog a visit and was turned away at the door. They couldn't find the content they were looking for and likely experienced massive...

Why You Should Learn CSS as a Blogger

Why You Should Learn CSS as a Blogger

Even though this article is titled Why You Should Learn CSS as a Blogger, I wrote it in my schedule as "Why You Learn CSS" and that made me laugh. So, why you learn CSS? While there are many fancy plugins out there that give you a buttload of control over the look of...

0 Comments

Trackbacks/Pingbacks

  1. How to Make Your Blog Mobile Friendly (And Look Awesome on Smartphones!) - Mama Needs Coffee - […] to use Comic Sans. We’ve evolved since then but, just because we have access to fancier fonts through sites…

Submit a Comment

Your email address will not be published. Required fields are marked *

Skip to content