21 Best Google Fonts for A Modern Blog and Website

119 Shares

The readability of your blog matters!

May not to you, but to me (as a reader.)

Something squeezes me inside when I’m on a page which is using fancy fonts which are hard to read, and I have to stress my eyes. And guess what I do?

You guessed it, I close the page (leaving a higher bounce rate)

The primary purpose of fonts is to be read. There’s nothing else they too which is as vital as helping readers understand.

So, the font you’re using should be accessible to the reader’s eyes and make the reading as convenient as possible.

Primarily, there are only two group of fonts. 1. Simple and 2. Fancy

The reading experience can vary significantly based on the group of the font you’re using.

But Shafi, I don’t agree with you, and I believe that Fonts make no difference!

You don’t have to.

My decisions are based on my instincts, and everyone has theirs. But what if I told you, that a study proved that Fonts matter? That people can guess your skills based on the font only. Sound weird?

Human Psychology of Simple Fonts

Two researchers, Hyunjin Song and Norbert Schwarz, did an experiment (source) which involved two groups of people.

The first group was given the direction to an exercise in a simple font (Arial)

While the second group was given the exact instructions in harder to read fonts (Brush)

The Results? Surprising.

The first group of people (with easy-to-read font) estimated that the task would take 8.2 minutes to complete. Whereas, the second group (with hard-to-read font) estimated a whopping 15.1 minutes.

Psychology of Simple Fonts

Mind that, both groups didn’t perform the task but estimated based *only* on the instructions they read.

Simply put, the choice of font can make a difference as big as 86% and people tend to overestimate the task if founded hard to read the instructions.

What does it mean for you?

If thyself a blogger who share various blogging tutorials and guides, it’s vital that you use simple fonts to boost the count of action-takers.

But! It doesn’t mean fancy fonts are useless. They are as useful as simple fonts based on where they are used. And to prove that, there’s another experiment (by the same researchers)

Human Psychology of Fancy Fonts

Again, the experiment involved two groups of people – first, who got a printed menu in a simple font and other received a printed menu in a fancy font.

The Results? Not what you’d expect.

The people who received the printed menu in Fancy fonts assumed that the chef has more skills. While another group who received the menu written in simple font thought that the chef isn’t as skilled.

What made them believe that? Fancy fonts provoked a thought that more work has gone into creating the product.

As put by the researchers, “If you are selling a costly product, describing it using a hard to read font will suggest to the viewer that more effort went into creating that product.”

Based on a research, using a Fancy theme can invoke the feeling that more effort went into the product. #FontsPsychologyClick To Tweet

Now that you understand the Human Psychology behind fonts, let me present you with the top 21 best Google fonts to use on a blog for a modern look and a better user experience.

Best Google Fonts for blogs

Best Google Fonts for Blogs and Websites

The list is in not sorted by a specific order or preference. I’ll keep adding more amazing Google fonts to the list as time passes, so make sure to either bookmark this page or subscribe to our newsletter.

1. Montserrat

Montserrat Font for Blog

Montserrat, created by Julieta Ulanovsky, was inspired by Old posters and Signage. It is a Sans-Serif font and has excellent readability.

It’s best used for headings and titles on the page. And there are 18 different styles available.

It pairs best with Open Sans and Raleway fonts.

2. Oswald

Oswald font for Blogger

Oswald is another simple font for blogger which looks beautiful yet readable.

It is a reworking of the classic style and fits best for body content and heading for articles.

Available in 6 different styles, Oswald is best paired with Roboto and Lato typefaces.

3. Zilla Slab

Zilla Slab font for Blogger

Zilla Slab is the popular typeface used by Mozilla for its own products like Firefox browser. It has smooth curves for better look and usability.

Due to its lightweight, Zilla Slab is a perfect fit for body content. It is available in 10 different font weights and can even be used for headings. It pairs best with Roboto and Open Sans fonts.

4. Open Sans

Open Sans fonts for Blog

Designed by Steve Matteson, Open Sans is my favorite font to use on a blog or website. It looks neat and is optimized for print, web, and mobile interfaces.

Available in 10 different styles, Open Sans is best suited for Heading, however, can be used for body content without a glitch. And it pairs best with Oswald and Montserrat.

5. Bitter

Bitter Font for Blogs

Bitter is another popular font which is designed for comfortable reading on any computer or device. It is designed by Sol Matas and has only 3 styles available. The ‘Regular’ style is thicker than other ‘regular’ typefaces.

It can be best used for website headings and sidebar. And pairs best with Open Sans and Source Sans Pro.

6. Raleway

Raleway fonts for website

Raleway is an elegant typeface which looks easy on eyes and professional at the same time. It is available in 18 different styles and intended for large size usages like headings and page title.

Open Sans and Josefin Slab look excellent when paired with Raleway.

7. Nunito Sans

Nunito Sans fonts for website

Available in 14 different styles, Nunito Sans is a well-balanced font with smooth curves. It looks good on both the article body and page headings. However, I prefer to use it for the sidebar.

Nunito Sans pairs well with Roboto and Montserrat typefaces.

8. Ubuntu

Ubuntu Font for Website

As you may have already guessed, Ubuntu is the font used by popular open source Operating System which goes by the same name. It has edges which look cool for technology-oriented websites and blogs.

Available in 8 different weights, Ubuntu typeface is most-suitable for content body and graphic designing. And it pairs well with Open Sans and Oswald for a professional yet elegant appearance.

8. Josefin Sans

Josefin Slab font for Blogs

Josefin Sans comes under the group of fancy fonts and thus widely used for graphics designing work. However, due to its elegance, it can be used on a website without much problem.

It is available in 10 different styles and looks neat for heading and sidebar titles. Moreover, it pairs best with Open Sans and Lato.

If you’re using Josefin Slab, make sure to use a large font size since it can be harder to read in smaller variants.

9. Arvo

Arvo Fonts for Website

Arvo is another professionally designed typeface which looks pleasant on all screen devices. Due to its thickness and curves, it can also be used as a fancy font.

It’s also suitable for prints and originates from an Estonian name meaning “number, value, worth.” Arvo is available in 4 different weights and pairs best with Oswald and Lato for a polished look.

10. Lato

Lato Fonts for Blogs

Lato is a classic font which pairs well with almost all of the fonts for blogs on this page. It was designed by Łukasz Dziedzic in 2010 and has been widely adopted afterward. Currently, it is adopted by more than 8,600,000 websites.

It’s a perfect font for article body due to its simplicity and ease of reading and available in 10 different styles. Lato pairs well with Open Sans and Raleway.

11. Vollkorn

Vollkorn best Google Font for Blogs

Another popular font known for its simplicity and adoption, Vollkorn is widely used for article body and headings. It’s available in 8 different styles and pairs well with Lato and Roboto.

This font is also adopted in prints in cases where a simplistic approach is taken. As you can see in the snapshot, Vollkorn doesn’t hurt eyes when reading even if smaller font-size is used.

12. Playfair Display

Playfair Display Best Google Fonts for Website

If you’re looking for a fancy font which is easy-to-read but doesn’t give a touch of professionalism, Playfair Display is the best Google font you can get.

It is popularly adopted by fashion blogs and female bloggers for body content as well as headings. Available in 6 different weights, Playfair Display combines best with Raleway and Open Sans Condensed.

13. Roboto

Roboto Best Google Fonts for Blogs

As the name suggests, Roboto has a mechanical skeleton while having open curves both at the same time. Roboto perfectly fits for headings and it is available in 12 different weights which can extend its use to sidebar font and page title.

Undoubtedly, Roboto is one of the most popular Google fonts featuring on more than 13,000,000 websites. It pairs well with Open Sans and Lato.

14. Allerta Stencil

Allerta Stencil Best Google Fonts for WordPress

Initially designed for signage and posters, Allerta Stencil is a decent fancy font which can be easily and clearly read from a distance.

Each letter of Allerta is distinguished which improves readability. However, it won’t look good on blogs and websites for body content. Allerta Stencil is a theme best used for graphics designing and prints.

It is available in only one style and pairs best with Special Elite typeface.

15. Source Sans Pro

Source Sans Pro Best Google Fonts for WordPress

You may have already noticed, Source Sans Pro is a font which combines beautifully with rest of the best Google fonts on the list. It is Adobe’s first open source typeface family, designed by Paul D. Hunt.

Available in 10 different styles, Source Sans Pro can be used anywhere on the website and still look pleasant. Also, it is one of the most popular Google web fonts being featured in more than 4,200,000 websites.

16. PT Sans

PT Sans best Google fonts for Blogs

PT Sans is based on Russian sans serif types and was developed for the project “Public Types of Russian Federation.” It is widely used inspired by Russian history and popularly used for headings and Title of the page.

The font is available in 8 different styles and popularly paired with Roboto and PT Serif (same family)

17. Merriweather

Merriweather Popular Google Fonts for Blogs

One of my favorite pick for graphics work, Merriweather font has a fancy look while being easily readable. It is designed for screens and features a condensed form of text.

Available in 8 different styles, Merriweather is an excellent font for headings and titles. Although it can be clearly used as a body font, it can cost some stress on eyes for long reading.

It is popularly paired with Oswald font and has been proudly featured in more than 2,700,000 websites.

18. Oxygen

Oxygen Best Google Fonts for Websites

The Oxygen font was initially designed for KDE Project, a libre desktop for the GNU+Linux operating systems. It looks beautiful and due to its simplicity, Oxygen font can be used on desktop and mobile devices freely.

Available in only three body weights, Oxygen is used for article body and sidebar font. The letters are longer than usual and thinner to give a professional look. It is popularly paired with Open Sans and Oswald typefaces.

19. Maven Pro

Maven Pro Best Google Fonts for Website

Maven Pro has round edges and blending which looks appealing on the desktop as well as prints. Its simplistic approach makes it an excellent for content body and sidebar font.

Available in only 4 different body weights (Regular, Medium, Bold, and Black), Maven Pro is well paired with Playfair Display and Roboto fonts.

20. Lora

Lora Best Fonts for Websites and Blogs

A perfect font for essay writing, Lora is another popular font available for Free. It has brushed curves which makes it appealing and sophisticated at the same time.

It is available in 4 styles only, which are enough for story writing. Lora is best paired with Open Sans and Lato fonts. For the web, Lora looks decent for the article body.

21. Lobster

Lobster Best Google Fonts for Blogs

Lobster is another very popular fancy theme which is an ideal choice for graphics designing but the article body. Due to its complexion, Lobster is hard-to-read font and requires stressing the eyes on certain words.

However, Lobster is an excellent pick for headings (considering that they aren’t too long) for fun-filled writing. It is available in only 1 style and combines best with Raleway and Josefin Slab typefaces.

How to Add Google Fonts to WordPress

Now that you may have picked a font from the list, let’s see how can add it to your WordPress site. Since WordPress is the most popular CMS for blogging (read more), I’m discussing the tutorial for it only. If you’re using any other blog platform and want a tutorial, just comment below.

Note: Many of the popular WordPress themes have an inbuilt Google fonts option. If that’s the case, you don’t need to follow the below steps.

1. Login to Your WordPress Dashboard

2. Go to Plugins > Add New

3. Search for “Easy Google Fonts”

4. Locate the “Easy Google Fonts” plugin by Titanium Themes and click the Install Now button. Activate it.

5. Go to Settings > Google Fonts and create a “New Font Control.”

6. Next, go to Themes > Customize > Typography to manage what fonts are used for which object.

ta! da!

Final Words

Content readability can affect the user experience of your site which in turns increases the bounce rate and lowers the time a user spends on the site.

Choosing a good font may not seem a crucial task at the beginning, but as you start focusing on blog metrics, you would know the importance.

My top three picks for best Google fonts for blogs and website are:

  • Open Sans
  • Raleway
  • Lato

Ultimate Growth Pack for Bloggers below post

What font are you using on your blog and does it looks perfect? Leave a comment and let us know. Also, make sure to share this post with your friends and followers.

Follow Me

Shafi Khan

Hey Readers, Welcome to BlogCharge. I am Shafi Khan, a Digital Marketer with 3 years of experience. Here I share my knowledge about Blogging, SEO, Link Building, Affiliate Marketing, and so on... Know more about me ...
Follow Me
119 Shares

8 thoughts on “21 Best Google Fonts for A Modern Blog and Website

  1. Hello Shafi,
    Now A Days Font size in blogging world play a vital role Which Helps You To Get more reader Very Easily and also if you have installed a good looking font in your blog then sure reader will visit your blog regularly.
    now i will go with “Bitter” font.

  2. Interesting article. I agree with most of your picks. Maven Pro looks really interesting. That’s a font I actually haven’t considered before.

    One detail though, I believe your Josephine Slab is in fact Josephine Sans. And your word splitting at the end of the lines makes reading this, ironically, very difficult.

    • Hi Daniel,

      Sorry for the inconvenience and a big thanks for pointing out the errors. I’ve fixed the issues and hope the reading experience will be better now.

      Keep visiting.

  3. Great fonts! I think my favorite here is Zilla Slab.

    Hey I’m leaving a comment to say I tried to say hello via your Contact page and the F*ck Yeah I’m a Human check doesn’t seem to work, (i.e., be viewable in order to check). Not sure it’s just me… I tried a few times. Anywho, I was wondering if you consult? Need some help changing themes and setting up AdSense… My contact info is below on this form. Thanks!

  4. Hey Shafi,

    Whenever I develop and new WordPress theme for my clients, I always take care of the font.

    Raleway and Roboto are the most famous fonts ever used so far. Lato is also something I use quite often.

    Thanks for the list.
    ~Ravi

    • Hi Ravi,

      The choice of font can affect the overall design of theme and it’s important that the font you choose blends in with the theme and looks clean on all screen sizes.

      Thanks for sharing your top picks. Keep visiting.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Pin
Tweet
Share
+1
119 Shares