The online Google Webfonts 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 in 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.

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.

Crafty Girls

Knewave

Gorditas

Berkshire Swash

Freckle Face

Henny Penny

Lily Script One

Fascinate Inline

Ceviche One

Kaushan Script

0

Shadows Into Light

1

Bigelow Rules

2

Eagle Lake

3

Underdog

4

Chicle

5

Cinzel

6

Risque

7

Handlee

8

Catchy Headings

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.

Bevan

9

Fauna One

0

Acme

1

Aladin

2

Cherry Swash

3

Permanent Marker

4

Oregano

5

Londrina Solid

6

Alegreya

7

Courgette

8

Chelsea Market

9

Merienda

0

Lova Ya Like a Sister

1

Ranchers

2

Droid Serif

3

Wendy One

4

PT Serif

5

Rammetto One

6

Gabriela

7

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-h5 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.

Mouse Memoirs

8

Brawler

9

Expletus Sans

0

EB Garamond

1

Cantora One

2

Roboto Slab

3

Alef

4

Rum Raisin

5

Belgrano

6

Skranji

7

McLaren

8

Rokkitt

9

Simonetta

0

Bree Serif

1

Overlock

2

Dosis

3

Nunito

4

Marmelad

5

Gentium Basic

6

Paragraph Text

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.

Muli

7

Montserrat

8

Montserrat Alternatives

9

Trocchi

0

Habibi

1

Fenix

2

Arvo

3

Lato

4

Coustard

5

Source Sans Pro

6

Quattrocento Sans

7

Arbutus Slab

8

Merriweather Sans

9

Rambla

0

Droid Sans

1

Average Sans

2

ABeeZee

3

Oxygen

4

Asap

5

Telex

6

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.

Monsieur La Doulaise

7

Alex Brush

8

Great Vibes

9

Crafty Girls

0

Grand Hotel

1

Indie Flower

2

Parisienne

3

Playball

4

Niconne

5

Condiment

6

Sacramento

7

Qwigley

8

Italianno

9

Yesteryear

0

Clicker Script

1

Butterfly Kids

2

Ruge Boogie

3

Lovers Quarrel

4

Princess Sofia

5

Final Thoughts

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.

You might also like…

20 Professional Fresh Headline Free Fonts
20 More Fresh & Free Fonts for Beautiful Headlines
25 Yet More Free Fonts for Headlines
Top 20 Free Fonts for Distinctive Headlines and Titles

Or, you could browse the Font archives.