The online Google Web Fonts service provides an enormous benefit to designers around the world. Instead of paying for a subscription or hosting your own fonts locally, this allows you to include a bit of CSS and utilize custom fonts hosted on Google’s servers. Cloud access provides unique URLs where you are not responsible for managing the font files themselves. The biggest downside is a longer page load time, but when used correctly visitors will barely notice the difference.
I have put together a collection of the most interesting Google fonts to be utilized in various pieces of content. These could be paragraphs, headings, footer links, navigation items, or any other common webpage items. The best method for using webfonts is to focus on the most important areas of content, not to bloat your site with 4 or 5 different typefaces. But I hope this collection may provide resources for designers who need some recommendations for new projects.
You might also like to take a look at these 25 Completely Free Web Fonts as well.
Logos & Branding
We can start off with a big category of the most unique typefaces you can use. I would recommend keeping these for your website logos, either in the header or footer of the page. The fonts are quite unique and they offers an easier method of branding which does not require an image or SVG file.
When building stuff like new project launches or tutorial demos, these fonts work great as the recognizable page logo.
The purpose of building unique font families in your page is for emphasis. You want visitors to be immediately impressed with the quality of your design and content. So adding custom typefaces onto your page headings would be a no-brainer! These fonts are best used for h2-h3 since they can often stand on their own. It gives visitors a sense of authority in the content when transitioning between new talking points.
Subheadings with Emphasis
Many websites use a logo with the addition of sub-text beside or beneath it. Similarly you can find websites that have smaller sub-headings built into the page content. Many developers would attribute these fonts onto h4-h3 elements, and h6 if you have the need. It is a great collection for bolded, smaller fonts with the potential of all-caps or variant CSS properties.
I would not always recommend using Google Webfonts for your paragraph copy. This can dramatically slow down the loading time of your page, and often you will notice the images/background fills in before the text. It can appear choppy to visitors on a slow connection. But in some cases it may be worthwhile to have your paragraphs using more customized font choices.
Cursive & Handwritten
The use for handwritten fonts is varied in a number of ways. These can work as logos or headings on the page. But it is also possible to add emphasis in your text, blockquotes, ad displays, or similar common page elements.
The cursive style can be difficult to read so it often requires larger font sizing. But without including any cursive/handwritten fonts in your website, they can still be a whole lot of fun to play with.
Google’s online repository of web fonts is steadily growing larger every month. It is an impressive feat to host a library of fonts online for the world of developers to include in their layouts. Many of the fonts can be downloaded for free and hosted locally, which makes this service even more useful.
If you notice any fonts that I’ve missed please share your ideas with us in the post discussion area below.