Tuesday

31 Best Google Fonts for Websites and Blogs for Better Readability


Sharing is caring!




Table of Contents




Do you know that fonts significantly affect your website? A bad font can ruin everything for you even if you get everything else right. A well-crafted content on your blog can give your readers and bad experience if your font is bad.


A font enables the reader to consume your content. And if it looks bad, you’re going to lose your visitors, conversions, and sales.


In a nutshell, your blog is not going to survive with a bad font. This brings us to the question:


What is the best Google font for websites and blogs?


This question cannot be answered without explaining the psychology of fonts.


In this article, you’re going to learn the best fonts for websites and blogs. Before we do that, we’ll also take a look at the psychology of fonts and what makes a font good or bad.


The Psychology Behind Fonts For Blogs & Websites


You might be thinking:


A font is a font. Why is there a need to dwell into the psychology of fonts?


And you’re totally right.


But there was an experiment conducted by Hyunjin Song and Norbet Schwartz that will make you rethink about the fonts you are using on your website.


In the experiment, two groups of people received a set of directions. One group received directions in a simple font while the other group received directions in a fancy font.


The group of people who received the simple font completed the given set of directions in 8.2 minutes while the group that received directions in a fancy font took approximately 15.1 minutes.



31 Best Google Fonts for Websites and Blogs for Better Readability 2

The results are eye-opening as just a font can make a huge difference in how people perceive information.


The same group of people were given a printed menu card. One with a simple font and the other with fancy fonts.


This time, the group that received the fancy font assumed that the chef was highly skilled and experienced while the group that received the card with simple font believed that the chef was inexperienced.


It can be understood from this experiment that different types of fonts appeal to people based on the situation.


In a nutshell, the semantic memory associated with fonts influences people how they feel about the content they’re reading.


So based on cognitive fluency, if your blog has a fancy and hard-to-read font, the information present in the content will also seem harder to do.


An example of cognitive fluency is an experiment conducted in 2014 where medical patients received set of instructions in different fonts. The patients who received instructions in harder-to-read fonts made them think the tasks were harder-to-do.


This is why choosing the right fonts are very important.


So what’s the best font?


You see:


It’s not that simple to answer this question.


And before we even get to discuss the best fonts, let’s first take a look at how to choose a font for your website or blog.


Watch this Video to know more about Typography



[embedded content]

How To Choose A Font For Your Website Or Blog


Choosing a font for your website is not that easy. You might think that a font that looks simple and easy to read is perfect for your audience.


But it’s beyond that.


Here’s how to choose a font for your blog that not only catches the reader’s attention but also helps create an emotional response towards your content.


1. Understand The Different Typeface Styles


Many people confuse fonts with typeface. Let me tell you this:


Fonts and typefaces are very different.


A font is a weight or a style of a particular typeface. And typefaces are basically different categories of fonts. For example, Times New Roman is a font and Sans Serif is a typeface.


Here’s a quick rundown of the different types of typefaces:


Serif


A font with short lines at the top and bottom of the letter are Serif fonts. Serif fonts are mostly used for print.



Serif-Font

Serif fonts are associated with formal, classy and traditional feeling. These types of fonts are easier to read and simple.


Serif fonts should be carefully used on the web as with small size, they can get harder to read. It is recommended that you use Serif fonts for headings and titles.


The most common Serif fonts are:


Times New Roman, Georgia, Bodoni, Baskerville, and Garamond.


Sans Serif


Fonts that don’t have thin lines or serifs at the top or bottom of the letter are called Sans Serif fonts.



Sans-Serif-Typeface

This feelings associated with this typeface are clean, stable, modern, universal, simple, and objective.


Sans Serif fonts are widely used in the digital world. These fonts are perfect for your website and blogs. You can use a Sans Serif font in your headings, body copy, and anywhere on your website.


But do remember that not all Sans Serif fonts are good.


The best and most common Sans Serif fonts are:


Arial, Verdana, Helvetica, Futura, Calibri, and Century Gothic.


Script


Script fonts are handwritten fonts and are often considered as elegant and classy. These type of fonts can be used for headings but not for body text as it would be hard-to-read.


Script fonts may product various emotional effects and that’s why you should carefully use them in the right context.



Script-Typeface

These types of fonts are most commonly used in Valentine Day cards and wedding invitations.


Script fonts are usually characterized as feminine, expensive, beautiful, delicate, fancy, and warm.


Most common Script fonts are:


Lobster, Lucida, Pacifico, Brush Script, and Comic Sans.


Modern


Modern fonts have thick bold lines. These fonts are used in photography blogs. Modern fonts attract millennials.



Modern-Typeface

These fonts are suitable for use in blog header and titles.


Modern fonts are associated with smart, trendy, intelligence, style, and sharp.


Examples of Modern fonts are:


Impact, Infinity, Majoram, Rockwell, and Agency.


Monospaced


Monospaced fonts are those that have larger spaces between them. These fonts look like they were written using a typewriter.



Monospaced-Typeface

This typeface is not recommended for using on websites and blogs as they make the text harder to reader.


Examples of Monospaced fonts are:


Courier, Consolas, and Monaco.


Decorative


Custom created fonts that don’t fit to any of the above category of typefaces are decorative fonts. These fonts are high-stylized and not at all ordinary.



Decorative-Typeface

These fonts are mostly fun, joy and emotional. Decorative fonts are good for headlines but don’t ever use them for your body text thinking that they look good.


Common decorative fonts are:


Letterpress, Escalope, Pinto, and Gotcha.


So that’s all about typefaces. Having an idea of typefaces helps you understand the different types of fonts.


It also helps you find and make a combination of different fonts.


2. Pick A Bigger Font Size


If the font size of your blog is 12pt, change it right away.


Always go for bigger font size because you don’t want your blog visitors to squint while reading.


Many designers now claim that 16pt is ideal for your content. And if you still feel that your font size is small, try increasing it from 16pt to 18pt.


Here’s the font sizes of some websites:


  • Medium: 22pt

  • The Next Web: 16pt

  • Neil Patel Blog: 18pt

  • Moz: 18pt

3. Don’t Forget The Font Spacing And Height


This a crucial aspect as it effects the overall readability of your website.


Take a look at the image below:



31 Best Google Fonts for Websites and Blogs for Better Readability 3

Now, which text seemed easier to read; left or right?


I believe your answer would be right. And here’s why:


It’s because the spacing of the font is more and hence it becomes easier to read it.


Similarly, the height of the font is also an important factor and should not be ignored. You should make sure that your paragraph lines are not too close to each other.


4. Your Font Should Align With Your Brand Tone


Most websites don’t do this.


Your fonts should align with your brand tone. So, if you’re a health company and are using fancy fonts, you’re going to have a hard time getting visitors to your website and converting them.


Not only this, you should make sure you use the same fonts you use in all your brand messaging.


Here’s what I mean by this:


The fonts you using for marketing on social media and the fonts on your website should be the same.


But:


This is not necessary. It just has some added benefits of your brand appearing consistent on the Internet.


If you cannot use the same fonts, at least try to use fonts that look similar.


5. Browser Friendliness


Not all fonts are compatible with browsers. You can download all the good fonts you want to but it will be a disaster if they aren’t compatible with all browsers.


To make sure that your font is compatible, check the format of the font you are using. There are several font formats.


Some of them are:


  • EOT (Embedded OpenType)

  • OTF (OpenType)

  • TTF (TrueType Font)

  • WOFF (Web Open Font Format) and WOFF2

  • SVG (Scalable Vector Graphics)

This infographic here shows which fonts are compatible by different browsers:



Font-Formats Compatibility

As seen from the above image, the TTF and WOFF format are compatible with almost all browsers.


So, make sure the font you are using on your website is of that format. If you’re on WordPress and using a font that came with your theme, you don’t have to worry about anything.


But, if you have uploaded custom fonts, you have to check their format. You can also convert your fonts from one format to another.


Resources To Find Fonts For Websites & Blogs


The last thing we’ll discuss before I list the best fonts for blogs is the places where to find them. These resources will help you find fonts.


1. Google Fonts


Google Fonts is the go-to place to find web fonts. You can find and download fonts from Google Fonts for free.


There are over 800 font families in Google Fonts and you can find the best one for you by filtering them based on the typeface, language, and other properties.


Google Font also gives you instructions on how to embed a font on your website. It also gives you control over the different styles of the font to download.


2. MyFonts


While Google Fonts is a good resource to find web fonts, their library is still small. MyFonts has the largest collection of fonts with over 130,000 of different types.


If you want information about new and trending fonts, MyFonts is the perfect place for you. You can find fonts based on your style


3. Font Squirrel


Font Squirrel is a free font directory with over hundreds of fonts that can be used for commercial use.


To use fonts from Font Squirrel, you’ll have to download them and upload it on your website unlike Google Fonts, where you don’t have to host fonts.


4. Adobe Typekit


Adobe Typekit is also one of the biggest font directories with over thousands of fonts from the best designers around the world.


You can explore the complete family of font and find fonts of different typefaces.


The best part about Typekit is that you can directly use fonts for your website without worrying about the licensing of the font.


5. WhatFont


This is not a font directory but an awesome Chrome extension which lets you find any font being used on a website.



WhatFont Chrome Extension

Once you download the extension, you can use it to find fonts used on a website. It gives complete details about font, family, style, weight, size, and color.


WhatFont is great extension if you want to find out the name of a font you like.


6. FontReach


FontReach is an awesome tool that shows the fonts used by the top one million websites.



Font Reach

You can also search for a font and find out which websites are using it.


It also shows the rankings of fonts based on the number of websites using it. This is a very helpful tool if you want to learn more about the font and it’s use on the web.


List of Best Google Fonts For Websites & Blogs in 2019 With Examples


Here are the top 31 fonts we found on popular websites.


1. Arial


It most used font on the internet and was drawn in 1982 by Robin Nicholas and Patricia Saunders.



Arial

Arial font never looks bad on any website. You can use it anywhere on your website. From headings to body of the text, this is one of the most familiar fonts and will lead to better readability.


The font is used by Facebook, Google, Amazon, Reddit, Huffington Post, Buzzfeed, and many other websites.


Typeface: Sans Serif


Best Use In: Anywhere on the website


2. Verdana


This Sans serif typeface font was designed by Matthew Carter and has become very famous because the quality of the font doesn’t degrade on small resolutions.



31 Best Google Fonts for Websites and Blogs for Better Readability 4

For this reason, Verdana is used by over 200,000 websites and is perfect for any kind of website.


Some websites using this font are Ebay, Pinterest, Apple, Flipkart, Quora, WordPress, The Guardian etc.


Typeface: Sans Serif


Best Use In: Anywhere on the website


3. Georgia


Another font designed by Matthew Carter, Georgia is the most widely used Serif font on the internet.



31 Best Google Fonts for Websites and Blogs for Better Readability 5

Brian Dean from Backlinko uses this font for his blog’s content:



Backlinko Blog Content Font

The font is perfect for using in your blog post content as it’s easily readable. You can also use it in your headlines, but I would suggest a combination of Georgia and a Sans Serif font to have some contrast.


Websites using this font include BBC, Forbes, TripAdvisor, Business Insider, and more.


Typeface: Serif


Best Use In: Body text of your blog posts and website


4. Lato


Lato is an open-source font family designed by Łukasz Dziedzic in the year 2010. Though the font is relatively new, it has become widely popular and is used across many different websites.



Lato-Font

Moz uses this font heavily on their website:



Moz Blog Font

The Lato font family is so diverse that there are many different styles available which makes it perfect for use in anywhere in your website.


You can use the bold style of Lato font for your website headings and use the normal style for your blog content.


The font is used by websites such as Freelancer, Grammarly, Alexa, Starbucks, Buffer, and more.


Typeface: Sans Serif


Best Use In: Anywhere on the website


5. PT Sans


As the name suggests, PT Sans is a Sans Serif typeface which is open-source. The font is very simple and used widely in many blogs.



31 Best Google Fonts for Websites and Blogs for Better Readability 6

An example of a website using this font is Ahrefs:



Ahrefs Blog Font

Other websites using PT Sans include ClickFunnels, Story Pick, Social Media Examiner, Hollywood Life etc.


Typeface: Sans Serif


Best Use In: Anywhere on the website


6. Gotham


Gotham is a perfect font for headlines and titles as it looks stunning with its style and width. It is a sans serif font and was introduced in 2000.



31 Best Google Fonts for Websites and Blogs for Better Readability 7

Backlinko uses this font for the blog post titles and headlines and you can clearly see how stunning it looks:



Backlinko Blog Font

You can use it for your body text too but I would suggest using it for headlines and complementing the font with a sans serif font for the body text.


Some notable websites using this font are Dropbox, Upwork, The Verge, Hostgator, Rolling Stone, Vox, and more.


Typeface: Sans Serif


Best Use In: Website headlines


7. Merriweather


This serif font was designed by Eben Sorkin and is an open-source font. Merriweather is a very simple and elegant serif font and is suitable for headlines.



31 Best Google Fonts for Websites and Blogs for Better Readability 8

If you’re looking for a classic look for your website, this font is perfect.


Websites like GoodReads, Bored Panda, Harvard, Daily Dot, and Encyclopedia use this font.


Typeface: Serif


Best Use In: Website headlines


8. Oswald


Oswald is a font designed by Vernon Adams from Google. This sans serif font was initially launched in 2011 and was updated till 2014.



31 Best Google Fonts for Websites and Blogs for Better Readability 9

New bold and light weights were added to the font which make it more modern looking. The font looks stunning in bold weights which is why it’s perfect for using in headlines.


Search Engine Land uses Oswald font for their headlines:



Search Engine Land Font

The font is also used by websites like WWE, PhoneArena, TomsGuide, ClickBank, and CreativeBloq.


Typeface: Sans Serif


Best Use In: Website headlines


9. Roboto


Used by over 21,000,000 websites, Roboto font was designed by Christian Robertson.



roboto-compressed

This font is used everywhere and you might not even know. The font is perfect for headlines and body text because of the different styles and weights available.


Some big websites using Roboto font are YouTube, AliBaba, Vice, NDTV, Asus, TMZ, Start Sports, and more.


Typeface: Sans Serif


Best Use In: Anywhere on the website


10. Helvetica Neue


Designed in 1983, this font is one of the best fonts in the world. And that’s because it has over 100 different styles.



31 Best Google Fonts for Websites and Blogs for Better Readability 10

This makes the font perfect to use anywhere on your website. You can use the bold weights of the font in your headlines and use the regular weights in the body text.


This is also the font Apple uses almost everywhere:



Apple Website Font

Websites using Helvetica Neue include GitHub, StackOverflow, Whastapp, SlideShare, Yelp, Vimeo, Pandora, and more.


Typeface: Sans Serif


Best Use In: Anywhere on the website


11. Montserrat


Montserrat font was designed by Julieta Ulanovsky. This is a bold and modern looking font used by many websites.



31 Best Google Fonts for Websites and Blogs for Better Readability 11

The font can be used on different types of website and anywhere on the website.


Websites like NBC, Movie Pilot, TomsGuide, and LeadPages use this font.


Typeface: Sans Serif


Best Use In: Anywhere on the website


12. Tahoma


Tahoma is a font by Microsoft designed by Matthew Carter. It’s one of the most popular sans serif fonts and is used widely on the different website.



31 Best Google Fonts for Websites and Blogs for Better Readability 12

The font is simple yet elegant which makes it perfect for use on blogs and websites.


ZippyShare, Marca, MakeMyTrip, Khan Academy, and Variety are some websites using this font.


Typeface: Sans serif


Best Use In: Anywhere on the website


13. Archivo


31 Best Google Fonts for Websites and Blogs for Better Readability 13

14. Rubik


31 Best Google Fonts for Websites and Blogs for Better Readability 14

15. Source Sans


31 Best Google Fonts for Websites and Blogs for Better Readability 15

16. Work Sans


31 Best Google Fonts for Websites and Blogs for Better Readability 16

17. Ubuntu


Ubuntu

18. Poppins


31 Best Google Fonts for Websites and Blogs for Better Readability 17

19. Oxygen


31 Best Google Fonts for Websites and Blogs for Better Readability 18

20. Open Sans


31 Best Google Fonts for Websites and Blogs for Better Readability 19

21. Source Sans Pro


31 Best Google Fonts for Websites and Blogs for Better Readability 20

22. Slabo


31 Best Google Fonts for Websites and Blogs for Better Readability 21

23. Raleway


31 Best Google Fonts for Websites and Blogs for Better Readability 22

24. Lora


31 Best Google Fonts for Websites and Blogs for Better Readability 23

25. Nunito Sans


31 Best Google Fonts for Websites and Blogs for Better Readability 24

26. Prompt


31 Best Google Fonts for Websites and Blogs for Better Readability 25

27. Zilla Slab


31 Best Google Fonts for Websites and Blogs for Better Readability 26

28. Bitter


31 Best Google Fonts for Websites and Blogs for Better Readability 27

29. Proxim Nova


31 Best Google Fonts for Websites and Blogs for Better Readability 28

30. Vollkorn


31 Best Google Fonts for Websites and Blogs for Better Readability 29

31. Maven Pro


31 Best Google Fonts for Websites and Blogs for Better Readability 30

What are the Best Font plugins?


If you are using WordPress, there is good news for you. WordPress gives you the functionality to change your fonts with easy by using Plugins.


Here are the top 10 typography plugins.


1. Easy Google Fonts


31 Best Google Fonts for Websites and Blogs for Better Readability 31

Easy Google Fonts is one of the best plugins to change the fonts of your blog. They have 300,000+ active install which makes it one of the most used typography plugin in WordPress.


With Easy Google Fonts, you can take full control of your typography with 600+ Google fonts.


2. WP-Typography


31 Best Google Fonts for Websites and Blogs for Better Readability 32

This plugin supports over 70 languages which makes it one of the popular plugin for content creators in every language.


This allows CSS hook styling of fonts with ease.


3. Google Fonts for WordPress


31 Best Google Fonts for Websites and Blogs for Better Readability 33

This live Google fonts customizer gives you the freedom to choose from 870+ awesome fonts.


You can use this plugin with any WordPress theme in the market because of its awesome compatibility. All the fonts are SEO optimized and the loading of fonts is impressive.


4. Font Awesome


31 Best Google Fonts for Websites and Blogs for Better Readability 34

If you want to make your blog Font awesome icons compatible, your search ends here.


This is an official plugin created by Font Awesome team.


5. Custom Fonts


31 Best Google Fonts for Websites and Blogs for Better Readability 35

With this plugin you can embed many font files (woff2, woff, ttf, svg, eot) easily in your WordPress website.


You can upload as many fonts as you want and use them in your WordPress theme.


This plugin can be best used if you are using some premium fonts at your blog.


6. Better Font Awesome


31 Best Google Fonts for Websites and Blogs for Better Readability 36

This plugin enhanced the Font Awesome plugin’s features by adding CSS, shortcodes, and TinyMCE icon shortcode generator.


If you want some advanced features with Font Awesome plugin, you can install this plugin.


7. WP Font Awesome


31 Best Google Fonts for Websites and Blogs for Better Readability 37

This plugin allows you to easily embed Font Awesome icon to your website using HTML or built-in shortcode handlers.


8. Seed Fonts


31 Best Google Fonts for Websites and Blogs for Better Readability 38

Seed Fonts is WordPress plugin that helps you use web fonts (@font-face embed) easier.


SeedFonts is an awesome plugin having bundled Thai-English fonts. With this plugin, you can use your own fonts uploaded in your desired folder.


WordPress Themes with in-built Fonts


So you have understood everything about the fonts, font sites, and plugins in this article. Now you must be thinking to have a theme where you can have all the Fonts pre installed.


Having the fonts pre-installed not only gives you more freedom to work with our theme, but you save your server time and space too which otherwise you occupy with a plugin.


So here are 2 themes which we recommend, if you want to have inbuilt fonts in the theme.


1. GeneratePress


31 Best Google Fonts for Websites and Blogs for Better Readability 39

GeneratePress is the best theme ever created in WordPress. We love this theme so much that this blog is using GeneratePress theme and 90% of my other blogs are also using this theme.


GeneratePress gives you the freedom to access all the Google fonts, third-party fonts and the fonts uploaded by you.


31 Best Google Fonts for Websites and Blogs for Better Readability 40

GeneratePress premium is available in just $49 only. It gives you.


  • All premium modules

  • Full access to the Site Library

  • Unlimited websites

  • 1 year of updates & support

  • 40% renewal discount

  • 30 day money back guarantee

2. WP Astra Theme


Another theme we recommend is, WPAstra.


31 Best Google Fonts for Websites and Blogs for Better Readability 41

We are using this theme at our official website AffloSpark.


They have inbuilt fonts to help you make awesome websites by choosing any font which aligns your business.



31 Best Google Fonts for Websites and Blogs for Better Readability 42

Conclusion


Choosing the right font for your blog or website is crucial for your presence as you may have learned from this article. It is not only important to have knowledge about the fonts, but also a good understanding of the combinations of fonts and what makes a font look good on a website.


That being said, the above fonts for websites mentioned in this article are perfect to use on your website or blog. But do check the recommendations for each font.


And one last tip:


Always strive to have some contrast between your fonts. Try to use a combination of a serif and a sans serif font.


Also, don’t forget the size of the font you’re using. Make sure the font is big enough to be read easily on any device of any resolution.


Now:


If you have any questions about using fonts on blog or websites, do leave a comment below.


/*Archive Template Only*/ #wp-coupons-outer-wrapper padding-left: 20px; padding-right: 20px; #wp-coupons-wrapper max-width: 1200px; /*Navigation*/ body .wp-coupons-nav a, body .wp-coupons-nav a:visited font-size: ; color: #0c0402; body .wp-coupons-nav a:hover, body .wp-coupons-nav a.wp-coupons-nav-selected color: #0872aa; body .wp-coupons-subnav a, body .wp-coupons-subnav a:visited font-size: ; color: #0c0402; border-color: #0c0402; body .wp-coupons-subnav a.active, body .wp-coupons-subnav a:hover color: #0872aa; border-color: #0872aa; /*Coupon Panel*/ .wp-coupons-coupon-panel background: #e5e5e5; .wp-coupons-coupon-panel .wp-coupons-discount-percent background: #1b3e5a; color: #ffffff; font-size: ; .wp-coupons-coupon-panel .wp-coupons-expiration color: ; font-size: ; .wp-coupons-coupon-panel .wp-coupons-discount-code background: #f9cc29; color: #0c0c0c; font-size: ; .wp-coupons-coupon-panel .wp-coupons-discount-code span color: #0c0c0c; border-color: #0c0c0c; .wp-coupons-coupon-panel .wp-coupons-ctr:before border-color: #f9cc29 transparent; .wp-coupons-coupon-panel .wp-coupons-ctr:after border-color: #f9cc29; .wp-coupons-coupon-panel .coupon-separator border-color: #d0d2d7; .wp-coupons-coupon-panel .coupon-title font-size: ; .wp-coupons-coupon-panel .coupon-title, .wp-coupons-coupon-panel .coupon-title:visited, .wp-coupons-coupon-panel .coupon-link, .wp-coupons-coupon-panel .coupon-link:visited, .wp-coupons-banner .coupon-title color: #0c0402; .wp-coupons-coupon-panel .coupon-title:hover, .wp-coupons-coupon-panel .coupon-link:hover color: #0872aa; .wp-coupons-coupon-panel .coupon-description font-size: 22px; line-height: ; min-height: ; max-height: ; .wp-coupons-coupon-panel .coupon-type, .wp-coupons-coupon-panel .coupon-type:hover, .wp-coupons-coupon-panel .coupon-type:visited color: #000000; font-size: ; .wp-coupons-coupon-panel a.coupon-link font-size: ; /*Pagination*/ body .wp-coupons-navigation .page-numbers, body .wp-coupons-navigation .page-numbers:visited background-color: #0c0402; body .wp-coupons-navigation .page-numbers.current, body .wp-coupons-navigation .page-numbers:hover background-color: #0872aa; /*Click to Reveal Popup*/ #wp-coupons-ctr-popup #wp-coupons-ctr-discount-code span background: #f9cc29; color: #0c0c0c; #wp-coupons-ctr-popup #wp-coupons-ctr-discount-url a color: #0c0402; #wp-coupons-ctr-popup #wp-coupons-ctr-discount-url a:hover color: #0872aa; /*Buttons*/ body a.wp-coupons-button background: #0c0402; border-color: #0c0402; font-size: ; body a.wp-coupons-button:hover color: #0872aa; border-color: #0872aa; @media(min-width: 794px) .wp-coupons-coupon.list.compact .wp-coupons-coupon-panel .coupon-link, .wp-coupons-coupon.list.minimal .wp-coupons-coupon-panel .coupon-link font-size: 22px; line-height: ;

No comments:

Post a Comment