Useful Google Webfonts for your Web Design Projects • Russwurm

Useful Google Webfonts for your Web Design Projects

Created: 15.04.2016 | Updated: 27.10.2016

Choosing the right font for your project, webpage or document is a never ending story. I just created an overview of some extraordinary fonts to have the right one at hand faster than ever. All of these fonts are part of Google Webfonts. Therefore it is dead easy to implement them in your own projects and usually the copyright restrictions are pretty user friendly. Still you should check before using them - you never know. The sample text over here might not be that useful but it shows some special characters to see if they are supported within the font.
Open Sans - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>


Indie Flower - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>


Lobster - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>


Pacifico - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>


Shadows Into Light - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>


Amatic SC - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>


Bangers - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>


Orbitron - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>


Chewy - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Chewy' rel='stylesheet' type='text/css'>


Poppins - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet' type='text/css'>


Covered By Your Grace - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Covered+By+Your+Grace' rel='stylesheet' type='text/css'>


Fredoka One - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Fredoka+One' rel='stylesheet' type='text/css'>


Gloria Hallelujah - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>


Satisfy - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>


Source Code Pro - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>


Rock Salt - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>


Permanent Marker - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>


Luckiest Guy - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>


Tangerine - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>


Special Elite - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>


Pinyon Script - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Pinyon+Script' rel='stylesheet' type='text/css'>


Allerta Stencil - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Allerta+Stencil' rel='stylesheet' type='text/css'>


Fontdiner Swanky - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Fontdiner+Swanky' rel='stylesheet' type='text/css'>


Six Caps - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Six+Caps' rel='stylesheet' type='text/css'>


Black Ops One - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Black+Ops+One' rel='stylesheet' type='text/css'>


Freckle Face - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'>


Finger Paint - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Finger+Paint' rel='stylesheet' type='text/css'>


Patrick Hand SC - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Patrick+Hand+SC' rel='stylesheet' type='text/css'>


Josefin Sans - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css'>


Abril Fatface - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Abril+Fatface' rel='stylesheet' type='text/css'>


Architects Daughter - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>


Chewy - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Chewy' rel='stylesheet' type='text/css'>


Coming Soon - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Coming+Soon' rel='stylesheet' type='text/css'>


Alfa Slab One - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>


Julius Sans One - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'>


VT323 - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=VT323' rel='stylesheet' type='text/css'>


Nixie One - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css'>


Lato - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>


Hind - and large BOLD
Just some sample text to sí how the font lóóks like - with some späcial chars as well (äöüAÜÖúÙ) and others [ { &good - make $ }] - usally numbers like 0, 1, 2, 3, 4, ... are interesting as well and the typical marks "like" this one or 'that' one or ´this´. And a little bit of bold as well as some italic and really small stuff.
<link href='https://fonts.googleapis.com/css?family=Hind' rel='stylesheet' type='text/css'>









You can view this page as reduced HTML version as well.