10 großartige und wunderschöne Google-Font Kombinationen

10 trendige Google-Font Kombinationen für Überschriften und Fließtext

10 großartige und wunderschöne Google-Font Kombinationen

Auf Google Web Fonts gibt es derzeit eine Sammlung von 676 Schriften (Web Fonts), welche Sie völlig kostenlos verwenden und in Ihre Webseite (Webprojekte) einbinden dürfen. Damit hat Google einen großen Beitrag zur Web-Typographie geleistet und ist eine hervorragende Alternative zu den verschiedenste Premium-Diensten für Schriften und Schriftfamilien.

Im Zusammenhang mit kostenlosen Web Fonts habe ich auf der Website von Design Shack einen interessanten Artikel zum Thema entdeckt. Dort werden 10 tolle und professionelle Google-Font Kombinationen vorgestellt, welche aus je 2 verschiedenen Schriften als Kombi für Artikelüberschriften und Fließtext bestehen.

HTML/Tutorials/Google-Fonts in Webseiten einbinden!

In diesem ausführlichen Tutorial lernen Sie, wie Sie Schriften von Google Fonts einfach und kostenfrei auf Ihrer Webseite einbinden.

10 wunderschöne Google-Font Kombinationen für Überschriften und Fließtext

Kopieren Sie einfach den HTML-Code unter der jeweiligen Grafik und binden Sie die von Ihnen ausgesuchten Schriften in Ihre Webseite ein. Vergessen Sie dabei aber bitte nicht, auch die CSS-Anweisungen in das entsprechende Stylesheet einzutragen!

#01 – Bree Serif & Open Sans

Bree Serif – Schriftsatz ansehen & Open Sans – Schriftsatz ansehen
Bree Serif in Google Fonts öffnen | Open Sans in Google Fonts öffnen
01 - Bree Serif & Open Sans

Einbindung mit HTML:



CSS – Schriftformatierung

h1 {font: 400 60px/1.3 'Bree Serif', Georgia, serif;}
p {font: 400 14px/1.6 'Open Sans', Verdana, Helvetica, sans-serif;}

#02 – Bevan & Pontano Sans

Bevan – Schriftsatz ansehen & Pontano Sans – Schriftsatz ansehen
Bevan in Google Fonts öffnen | Pontano Sans in Google Fonts öffnen
02 - Bevan and Pontano Sans

Einbindung mit HTML:



CSS – Schriftformatierung

h1 {font: 400 60px/1.3 'Bevan', Georgia, serif;} 
p {font: 400 16px/1.6 'Pontano Sans', Verdana, Helvetica, sans-serif;}

#03 – Abril Fatface & Average

Abril Fatface – Schriftsatz ansehen & Average – Schriftsatz ansehen
Abril Fatface in Google Fonts öffnen | Average in Google Fonts öffnen
03 - Abril Fatface & Average

Einbindung mit HTML:



CSS – Schriftformatierung

h1 {font: 400 60px/1.3 'Abril Fatface', Georgia, serif;}
 p {font: 400 17px/1.6 'Average', Garamond, Georgia, serif;}

#04 – Playfair Display & Muli

Playfair Display – Schriftsatz ansehen & Muli – Schriftsatz ansehen
Playfair Display in Google Fonts öffnen | Muli in Google Fonts öffnen
04 - Playfair Display and Muli

Einbindung mit HTML:



CSS – Schriftformatierung

h1 {font: 400 60px/1.5 'Playfair Display', Georgia, serif;}
p {font: 400 16px/1.6 'Muli', Verdana, Helvetica, sans-serif;}

#05 – Sansita One & Kameron

Sansita One – Schriftsatz ansehen & Kameron – Schriftsatz ansehen
Sansita One in Google Fonts öffnen | Kameron in Google Fonts öffnen
05 - Sansita One & Kameron

Einbindung mit HTML:



CSS – Schriftformatierung

h1 {font: 400 70px/1.2 'Sansita one', Georgia, serif;}
p {font: 400 17px/1.6 'Kameron', Georgia, serif;}

#06 – Istok Web & Lora

Istok Web – Schriftsatz ansehen & Lora – Schriftsatz ansehen
Istok Web in Google Fonts öffnen | Lora in Google Fonts öffnen
06 - Istok Web & Lora

Einbindung mit HTML:



CSS – Schriftformatierung

h1 {font: 400 70px/1.2 'Istok Web', Verdana, Helvetica, sans-serif}
p {font: 400 16px/1.6 'Lora', Georgia, serif;}

#07 – Pacifico & Arimo

Pacifico – Schriftsatz ansehen & Arimo – Schriftsatz ansehen
Pacifico in Google Fonts öffnen | Arimo in Google Fonts öffnen
07 - Pacifico & Arimo

Einbindung mit HTML:



CSS – Schriftformatierung

h1 {font: 400 95px/1.6 'Pacifico', Georgia, serif;}
p {font: 400 16px/1.6 'Arimo', Verdana, Helvetica, sans-serif;}

# 08 – Nixie One & Ledger

Nixie One – Schriftsatz ansehen & Ledger – Schriftsatz ansehen
Nixie One in Google Fonts öffnen | Ledger in Google Fonts öffnen
08 - Nixie One & Ledger

Einbindung mit HTML:



CSS – Schriftformatierung

h1 {font: 400 80px/1.2 'Nixie One', Georgia, serif;}
p {font: 400 15px/1.6 'Ledger', Garamond, Georgia, serif;}

#09 – Cantata One & Imprima

Cantato One – Schriftsatz ansehen & Imprima – Schriftsatz ansehen
Cantata One in Google Fonts öffnen | Imprima in Google Fonts öffnen
09 - Cantata One & Imprima

Einbindung mit HTML:



CSS – Schriftformatierung

h1 {
  font: 400 70px/1.2 'Cantata One', Georgia, serif;
  color: #2f99ba;
}
p {
  font: 400 16px/1.6 'Imprima', Verdana, Helvetica, sans-serif;
  width: 480px;
  color: #232525;
}

#10 – Rancho & Gudea

Rancho – Schriftsatz ansehen & Gudea – Schriftsatz ansehen
Rancho in Google Fonts öffnen | Gudea in Google Fonts öffnen
10 - Rancho & Gudea

Einbindung mit HTML:



CSS – Schriftformatierung

h1 {font: 400 95px/1.1 'Rancho', Georgia, serif;}
p {font: 400 17px/1.6 'Gudea', Verdana, Helvetica, sans-serif;}

Fazit:

Ich hoffe, Sie haben hier einige Schriftkombinationen gefunden, welche Ihnen gefallen und Sie für Ihre Projekte verwenden möchten. Vielleicht haben Sie jedoch auch andere interessante Kombination im Web entdeckt – dann freut es mich, wenn Sie Ihre Funde hier bei mir in den Kommentaren posten.

Tweet about this on TwitterShare on Google+0Share on Facebook0Email this to someone

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *