good-google-fonts: A repository from stabla

#Font-guide

Inspired by HackDesign and @ubuwaits's project : [beautiful-web-type] (https://github.com/ubuwaits/beautiful-web-type)

Good-google-fonts in action : https://stabla.github.io/good-google-fonts/

Definition

Serif type has extensions or strokes on the ends of the letters.
San-Serif does not have extensions or strokes on the ends of the letters and are used heavily for labeling, headlines and titles.
Script, symbols and decorative type are all styles of type categories to create a specific image or message. Weddings might lean more toward the fluid motion of a script type while a child’s birthday might be more inclined to like a decorative font from a favorite movie.

Tips

Prefer to use a good serif typography as Times New Roman. This type of font is easy to read for longer pieces and tends to be a little more conservative. If you do not deliberately choose another font, most programs default to the Times New Roman style.

Sans-serif is also easy to read with a more contemporary feel to it. Children’s books use this because it is more easily identifiable as children are learning the alphabet.

Use consistency in your layouts. It means same font through your piece.

A website with bad font will be ugly website. But it's about words too.

It's not an univeral rule, but take care of what font you're using.

Ressources used :

List of fonts :

Serif

Abril Fatface
Alegreya
Cardo
Droid Serif
Gentium Book Basic
Gravitas One
Glegoo
Lora
Merriweather
Noticia Text
Old Standard TT
Playfair Display
Poly
PT Mono
PT Serif
Rokkitt
Vollkorn

SANS

Abel

    Weight available : regular 400
    Multilanguage : NO
    Selection URL : https://fonts.google.com/?selection.family=Abel
    Perfect for : personnality to heading
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
    CSS : font-family: 'Abel', sans-serif;

Amaranth

    Weight available : regular 400, regular 400 Italic, bold 700, bold 700 Italic
    Multilanguage : NO
    Selection URL : https://fonts.google.com/?selection.family=Amaranth
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Amaranth" rel="stylesheet">
    CSS : font-family: 'Amaranth', sans-serif;

Armata

    Weight available : regular 400
    Multilanguage : NO
    Selection URL :https://fonts.google.com/?selection.family=Armata
    Perfect for : technical-looking
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Armata" rel="stylesheet">
    CSS : font-family: 'Armata', sans-serif;

Asap

    Weight available : regular 400, regular 400 Italic, bold 700, bold 700 Italic
    Multilanguage : NO
    Selection URL : https://fonts.google.com/?selection.family=Asap
    Perfect for : Cool for italic variant
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Asap" rel="stylesheet">
    CSS : font-family: 'Asap', sans-serif;

Cabin

    Weight available : regular 400, regular 400 Italic, medium 500, medium 500 Italic, semi-bold 600, semi-bold 600 Italic, bold 700, bold 700 Italic
    Multilanguage : NO
    Selection URL : https://fonts.google.com/?selection.family=Cabin
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
    CSS : font-family: 'Cabin', sans-serif;

Dosis

    Weight available : extra-light 200, light 300, regular 400, medium 500, semi-bold 600, bold 700, extra-bold 800
    Multilanguage : NO
    Selection URL : https://fonts.google.com/?selection.family=Dosis
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
    CSS : font-family: 'Dosis', sans-serif;

Droid Sans

    Weight available : regular 400, bold 700
    Multilanguage : NO
    Selection URL : https://fonts.google.com/?selection.family=Droid+Sans
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
    CSS : font-family: 'Droid Sans', sans-serif;

Gudea

    Weight available : regular 400, regular 400 Italic, bold 700
    Multilanguage : NO
    Selection URL : https://fonts.google.com/?selection.family=Gudea
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Gudea" rel="stylesheet">
    CSS : font-family: 'Gudea', sans-serif;

Lato *

    Multilanguage : NO
    Weight available : thin 100, thin 100 Italic, light 300, light 300 Italic, regular 400, regular 400 Italic, bold 700, bold 700 Italic, black 900, black 900 Italic
    Selection URL : https://fonts.google.com/?selection.family=Lato
    Perfect for : For large size, not for body copy !
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    CSS : font-family: 'Lato', sans-serif;

Open Sans *

    Weight available : light 300, light 300 Italic, regular 400, regular 400 Italic, semi-bold 600, semi-bold 600 Italic, bold 700, bold 700 Italic, extra-bold 800, extra-bold 800 Italic
    Multilanguage : YES
    Selection URL : https://fonts.google.com/?selection.family=Open+Sans
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    CSS : font-family: 'Open Sans', sans-serif;

Oswald *

    Weight available : light 300, regular 400, bold 700
    Multilanguage : NO
    Selection URL : https://fonts.google.com/?selection.family=Oswald
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
    CSS : font-family: 'Oswald', sans-serif;

PT Sans *

    Weight available : regular 400, regular 400 Italic, bold 700, bold 700 Italic
    Multilanguage : YES
    Selection URL : https://fonts.google.com/?selection.family=PT+Sans
    Perfect for : Font perfect for corporate sites
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
    CSS : font-family: 'PT Sans', sans-serif;

PT Sans Narrow *

    Weight available : regular 400, bold 700
    Multilanguage : YES
    Selection URL : https://fonts.google.com/?selection.family=PT+Sans+Narrow
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">
    CSS : font-family: 'PT Sans Narrow', sans-serif;

Ropa Sans

    Weight available : regular 400, regular 400 Italic
    Multilanguage : NO
    Selection URL : https://fonts.google.com/?selection.family=Ropa+Sans
    Perfect for : Cool for headings
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet">
    CSS : font-family: 'Ropa Sans', sans-serif;

Source Sans Pro

    Weight available : extra-light 200, extra-light 200 Italic, light 300, light 300 Italic, regular 400, regular 400 Italic, semi-    bold 600, semi-bold 600 Italic, bold 700, bold 700 Italic, black 900, black 900 Italic
    Multilanguage : YES
    Selection URL : https://fonts.google.com/?selection.family=Source+Sans+Pro
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
    CSS :  font-family: 'Source Sans Pro', sans-serif;

SERIF

Abril Fatface *

    Weight available : regular 400
    Multilanguage : NO
    Selection URL : https://fonts.google.com/?selection.family=Abril+Fatface
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
    CSS : font-family: 'Abril Fatface', cursive;

Alegreya

    Weight available : regular 400, regular 400 Italic, bold 700, bold 700 Italic, black 900, black 900 Italic
    Multilanguage : NO
    Selection URL : https://fonts.google.com/?selection.family=Alegreya
    Perfect for : Font for both body copy and headings. 
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Alegreya" rel="stylesheet">
    CSS : font-family: 'Alegreya', serif;

Cardo *

    Weight available : regular 400, regular 400 Italic, bold 700
    Multilanguage : YES
    Selection URL : https://fonts.google.com/?selection.family=Cardo
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Cardo" rel="stylesheet">
    CSS : font-family: 'Cardo', serif;

Droid Serif

    Weight available : regular 400, regular 400 Italic, bold 700, bold 700 Italic
    Multilanguage : NO
    Selection URL : https://fonts.google.com/?selection.family=Droid+Serif
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet">
    CSS : font-family: 'Droid Serif', serif;

Gentium Book Basic *

    Weight available : regular 400, regular 400 Italic, bold 700, bold 700 Italic
    Multilanguage : NO
    Selection URL : https://fonts.google.com/?selection.family=Gentium+Book+Basic
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Gentium+Book+Basic" rel="stylesheet">
    CSS : font-family: 'Gentium Book Basic', serif;

Gravitas One *

    Weight available : regular 400
    Multilanguage : NO
    Selection URL : https://fonts.google.com/?selection.family=Gravitas+One
    Perfect for : Old school
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Gravitas+One" rel="stylesheet">
    CSS : font-family: 'Gravitas One', cursive;

Glegoo

    Weight available : regular 400, bold 700
    Multilanguage : YES
    Selection URL : https://fonts.google.com/?selection.family=Glegoo
    Perfect for : Slab industrial look
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Glegoo" rel="stylesheet">
    CSS : font-family: 'Glegoo', serif;

Lora

    Weight available : regular 400, regular 400 Italic, bold 700, bold 700 Italic
    Multilanguage : NO
    Selection URL : https://fonts.google.com/?selection.family=Lora
    Perfect for : Perfect for body copy
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
    CSS : font-family: 'Lora', serif;

Merriweather *

    Weight available : light 300, light 300 Italic, regular 400, regular 400 Italic, bold 700, bold 700 Italic, black 900, black 900 Italic
    Multilanguage : YES
    Selection URL : https://fonts.google.com/?selection.family=Merriweather
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
    CSS : font-family: 'Merriweather', serif;

Noticia Text

    Weight available : regular 400, regular 400 Italic, bold 700, bold 700 Italic
    Multilanguage : YES
    Selection URL : https://fonts.google.com/?selection.family=Noticia+Text
    Perfect for : Good serif option
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Noticia+Text" rel="stylesheet">
    CSS : font-family: 'Noticia Text', serif;

Old Standard TT *

    Weight available : regular 400, regular 400 Italic, bold 700
    Multilanguage : NO
    Selection URL : https://fonts.google.com/?selection.family=Old+Standard+TT
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Old+Standard+TT" rel="stylesheet">
    CSS : font-family: 'Old Standard TT', serif;

Playfair Display *

    Weight available : regular 400, regular 400 Italic, bold 700, bold 700 Italic, black 900, black 900 Italic
    Multilanguage : YES
    Selection URL : https://fonts.google.com/?selection.family=Playfair+Display
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
    CSS : font-family: 'Playfair Display', serif;

Poly

    Weight available : regular 400, regular 400 Italic
    Multilanguage : NO
    Selection URL : https://fonts.google.com/?selection.family=Poly
    Perfect for : Alternativ to Lora
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Poly" rel="stylesheet">
    CSS : font-family: 'Poly', serif;

PT Mono *

    Weight available : regular 400
    Multilanguage : YES
    Selection URL : https://fonts.google.com/?selection.family=PT+Mono
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
    CSS : font-family: 'PT Mono', monospace;

PT Serif *

    Weight available : regular 400, regular 400 Italic, bold 700, bold 700 Italic
    Multilanguage : YES
    Selection URL : https://fonts.google.com/?selection.family=PT+Serif
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=PT+Serif" rel="stylesheet">
    CSS : font-family: 'PT Serif', serif;

Rokkitt

    Weight available : regular 400, bold 700
    Multilanguage : NO
    Selection URL : https://fonts.google.com/?selection.family=Rokkitt
    Perfect for : Slab with strong personnality 
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Rokkitt" rel="stylesheet">
    CSS : font-family: 'Rokkitt', serif;

Vollkorn *

    Weight available : regular 400, regular 400 Italic, bold 700, bold 700 Italic
    Multilanguage : NO
    Selection URL : https://fonts.google.com/?selection.family=Vollkorn
    
    Font-link : <link href="https://fonts.googleapis.com/css?family=Vollkorn" rel="stylesheet">
    CSS : font-family: 'Vollkorn', serif;

Notes

*: You can view these fonts already on @ubuwaits's project : [beautiful-web-type] (https://github.com/ubuwaits/beautiful-web-type). To check his samples : Beautiful Web Type

For what's left, see here : https://stabla.github.io/good-google-fonts/

stabla/good-google-fonts