24 Great Google Web Fonts for Web Designing

freebies 4042 Comments

Why Use Google Fonts?

First, a pure CSS solution is one that developers can get on board with. Next, the fact that @font-face fully supports text selection and actions such as copy and paste means that usability experts love it. Finally, the fact that you can easily cook up an @font-face recipe for just about any font means that designers love it because they have a wide range of properly licensed fonts to choose from. If you get developers, designers and the usability guys on board, it’s game over for Flash, JavaScript and image-based solution.

Recommended: Download Free Fonts(in .TTF format)

How to Implement these in a Website?

Using them is really quick and simple:

  • You choose a font. You can add it to your collection or use "quick-use" to generate the code and options for that font.
  • Copy and paste the code generated into the <Head> section.

    <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    </head>

  • The font is now accessible in your CSS code

    body {
    font-family: 'Tangerine', serif;
    font-size: 48px;
    }

Here are some of the top recommended fonts from Google Web Fonts directory that you can use in your web design projects.

1. Varela Round

varela round

Varela Round is based on the well known font Varela. Its rounded corners make it perfect for a soft feel and work great at any size. It is suitable for headlines and printed collateral, and maintains its distinct properties amongst other objects. Varela Round is a great font for any website.

2. Cutive

cutive

The design of Cutive, and this monospace sister family Cutive Mono, is based on a number of classic typewriter typefaces, in particular the faces of IBM's 'Executive,' and the older 'Smith-Premier.' In Cutive these old faces re-emerge as webfonts that are useful for adding character to body texts as well as in larger sizes for headers and display.

3. Alike

alike

Alike is a text typeface with expressive and tense letterforms. Its design features are said to have Czech influence, but are softened for a friendlier feel.

4. Habibi

habibi

Habibi is a high contrast serifed text face. Habibi is easy to read and offers a certain elegance to go with this. Habibi draws both on the qualities of 15th and 16th century text faces and on crisp contenporary ones. Habibi can be used from small sizes to larger display settings.

5. Alegreya

alegreya

Alegreya was chosen as one of 53 "Fonts of the Decade" at the ATypI Letter2 competition in September 2011, and one of the top 14 text type systems.

6. Andada

andada

Andada is a text font with an organic-slab serif, hybrid style, a solid design of medium stroke contrast.

7. Noto Sans

noto sans

When text is rendered by a computer, sometimes there will be characters in the text that can not be displayed, because no font that supports them is available to the computer. When this occurs, small boxes are shown to represent the characters.

8. Ultra

ultra

Ultra is an ultra bold slab typeface with nods to wood type styles like Clarendon and Egyptian. Strong and dramatic letterforms for titling, a serious, yet friendly, and easily legible typestyle. Perfect for power headlines and titling for impact.

9. Trocchi

trocchi

Trocchi is a design derived from a number of old faces from the English typecutter Vincent Figgins. Trocchi is designed for use both as text and display type. The font is named after the Scottish novelist Alexander Trocchi.

10. Francois One

francois one

Francois One is a reworking of traditional sans serif gothic display typeface forms. In Francois One, the earlier letter forms have been digitised and then reshaped for use as a webfont, the counters have been opened up a little and the stems optimised for use as bold display font in modern web browsers. Slanted stem terminals have been added to give the face added visual play.

11. Roboto Slab

roboto slab

Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto compromise, allowing letters to be settle in to their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.

12. Vidaloka

vidaloka

Vidaloka is a Didone display typeface for headlines and short blocks of text. Because of its high contrast it will work best from 16px and above.

13. Arbutus Slab

arbutus slab

Arbutus Slab is a sturdy medium contrast slab serif font. Arbutus is inspired by 18th and 19th American jobbing type. The generous spacing found in this design means that it can be used at fairly small sizes which makes it surprisingly versatile.

14. Averia Serif Libre

averia serif libre

Averia is a Unicode typeface superfamily created from the average of all fonts on the computer of the creator, Dan Sayers. All metrics are the result of an averaging process. The included glyphs are those that existed in a majority of the source fonts.

15. Average Sans

average sans

Average Sans has the color, structure and proportions of its serif sister family, Average, which it complements harmoniously. The neutrality of the forms create a nice texture, both for texts and short headlines. Use it for online magazines, academic texts and blogs.

16. Domine

domine

From the very first steps in the design process 'Domine' was designed, tested and optimized for body text on the web. It shines at 14 and 16 px. And can even be used as small as 11, 12 or 13px.

17. Fjalla One

fjalla one

Fjalla One is a medium contrast display sans serif. Fjalla One has been carefully adjusted to the restrictions of the screen. Despite having display characteristics Fjalla One can be used in a wide range of sizes.

18. Lato

lato

Lato is a sanserif typeface family.

19. Playfair Display

playfair display

Playfair is a transitional design. This influenced typographical letterforms to become increasingly detached from the written ones. Developments in printing technology, ink, and paper making, made it possible to print letterforms of high contrast and delicate hairlines.

20. Vollkorn

vollkorn

Vollkorn has dark and meaty serifs and a bouncing and healthy look. It might be used as body type as well as for headlines or titles. It stood for the small fonts for every day use in hand setting times.

21. Arimo

arimo

Arimo is an innovative, refreshing sans serif design that is metrically compatible with Ariala. Arimo offers improved on-screen readability characteristics and the pan-European WGL character set and solves the needs of developers looking for width-compatible fonts to address document portability across platforms.

22. Days One

days one

Days One letterforms are wide, and the strokes are thick. This makes Days One good for headlines. It is similar to the more Regular weight font 'Numans' also available in Google Web Fonts.

23. Donegal One

donegal one

Donegal One is a text typeface designed to be highly legible and comfortable when reading on screen. Donegal's utility and personality consistently shows from small text sizes to display. Donegal uses the cut interior curve associated with W.A. Dwiggins.

24. Archivo Black

archivo black

Archivo is a grotesque sans serif typeface family from Omnibus-Type. It was originally designed for highlights and headlines. This family is reminiscent of late nineteenth century American typefaces.

themeforest banner
elegant themes banner

Related Articles:

You may be interested in:

Mike Smith writes for WebToolHub.com. He loves to golf, cook and explore music in his free time.

Would you like to contribute to this site? Get started »
Rate this article:
(5.0 rating from 1 votes)

Comments