#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/
- 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.
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.
- Abel
- Amaranth
- Armata
- Asap
- Cabin
- Dosis
- Droid Sans
- Gudea
- Lato
- Open Sans
- Oswald
- PT Sans
- PT Sans Narrow
- Ropa Sans
- Source Sans Pro
- 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
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
- *: 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/
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent