Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Menü
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt

< dr. web > » Schrift & Grafik » So findest du die schönsten Google Fonts

So findest du die schönsten Google Fonts

  • Aktualisiert am 10. April 2023
  • von Sven Lennartz
  • Schrift & Grafik
  •  

Google Fonts haben sich seit ihrer Einführung 2010 nachhaltig einen Platz im Web erobert. Vorbei sind die Zeiten, in denen man mit nur wenigen Standardschriften auskommen musste. Heutzutage hat der Seitenbetreiber, Grafiker, Layouter und Blogger Hunderte davon zur Auswahl.

Google ist zwar nur eine Möglichkeit, aber die am weitesten verbreitete, was am Preis liegen könnte. Die Google Fonts nämlich darf jeder kostenlos nutzen – ohne Anmeldung, ohne Daten preiszugeben.

Auch wenn es von Adobe ein zu bezahlendes Konkurrenzprodukt mit noch mehr Auswahl gibt, auf den Vorteil sollte man nicht verzichten. Siehe auch:

  • 18 Quellen, die dich im  die besten Schriftarten und Fonts kostenlos finden lassen
  • 80 fantastische Schriften
  • Wie ich Beitragsbilder fürs Blog erstelle

Kostenlos und frei verfügbare Schriften

Es gibt rund 1.424 Google Schriftarten (Stand 06/2022). Alle sind als Open Source frei einsetzbar. Du kannst die Schriften herunterladen und damit Grafiken oder Logos erstellen, du kannst sie in ein Stylesheet einbinden und in deinem Blog nutzen. WordPress Blogger kennen Plugins dafür, viele moderne Themes bringen eine Google Schrift oder sogar einen Fontwähler gleich mit.

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.

Die 20 beliebtesten Google Fonts

  1. Roboto
  2. Open Sans
  3. Lato
  4. Montserrat
  5. Poppins
  6. Source Sans Pro
  7. Roboto Condensed
  8. Oswald
  9. Roboto Mono
  10. Raleway
  11. Noto Sans
  12. Inter
  13. Ubuntu
  14. Nunito
  15. Roboto Slab
  16. Merriweather
  17. PT Sans
  18. Mukta
  19. Palyfair Display
  20. Rubik

Et-Zeichen, das Fragezeichen und den Hashtag (#). Soweit ich sagen kann, sind Sonderzeichen und deutsche Umlaute in den meisten dieser Schriften enthalten, wenn nicht gar in allen.

Wenn es nun schon so viele davon gibt, bleibt erstens die Frage, was einsetzen und zweitens, was zueinanderpasst? Denn warum solltest du nicht mehrere Fonts miteinander kombinieren?

google-fonts-paar-2

Oben: Zwei Zeilen = ein Font. Die untere Zeile ist fett, trotzdem ist das Ergebnis ziemlich langweilig.

google-fonts-paar

Ganz anders bei dieser Beispielpaarung. Die zweite Schrift sorgt für Pepp

Hier bei Conterest mache ich in den Beitragsbildern regen Gebrauch und zeige dir die schönsten Google Fonts und Font Kombinationen. Denn häufig nutze ich zwei davon in einem Bild. Klick dich durch die Beiträge, um zu sehen, was damit möglich ist.

google-font-paar-3

Es ist durchaus verbreitet, Überschrift und Fließtext in einem anderen Font zu setzen. Natürlich wird davon kein Posting besser, aber man lenkt den Blick des Lesers auf den Text. Der kann nämlich gar nicht anders als den Kontrast beachten. Unglücklicherweise ist die Verschwisterung von Schriften nicht so einfach. Tolle Kombinationen von Google Fonts von Victoria.

Conterest verwendet, jetzt wo ich diese Zeilen schreibe, den Google Font Aleo für die Überschriften und Montserrat den Fließtext. Aber das mag sich auch wieder ändern. Ich bin da experimentierfreudig. Nur für den Fall, dass du fragen wolltest.

Google Fonts DSGVO-konform in Webseiten einbinden

Hier bei Conterest habe ich das sicherheitshalber auch über den eigenen Server gelöst. Besser ist das. Hier die besten Links dazu:

  • Wie du in WordPress Google Fonts DSGVO konform einbaust
  • Google Fonts auf eigenem Webserver in WordPress einbinden

Meine Liste mit Lieblings Fontkombinationen

11 Paarungen und zwar weitgehend Sans Serif, also ohne Füßchen. Geeignet für Beitragsbilder und vieles mehr. Nicht wenige dieser Fonts sind neu in der Googelschen Sammlung.

 Google Fonts Kombinationen

Die besten Designs zu finden ist angesichts der Menge der Möglichkeiten alles andere einfach, zudem braucht man einen Blick dafür. Weil das so ist, haben hilfreiche Zeitgenossen Werkzeuge entworfen, mit deren Hilfe man dem Problem beikommen kann. Die Links dazu zeige ich dir gleich …

google fonts haiku regentag

Oben: Ich hätte nie gedacht, dass ich einmal eines meiner Gedichte in einem Artikel würde unterbringen können. Aber da musst du jetzt durch. Diese Poesiegrafik verwendet gleich 3 Schriftarten. Hauptschrift ist Ubuntu.

Anfängerfrage – wo kann man das nutzen?
Einsetzen kann man Google Fonts überall da, wo man selbst Stylesheets einbauen kann/darf. Auch bei WordPress.com geht es, aber nur in der kostenpflichtigen Variante (nennt sich dann Custom Design). Selbst gehostete Blogs können Plugins verwenden und haben so nicht die geringsten Probleme, oft unterstützen gute Themes bereits die Verwendung von Google Fonts.

Praktische Tipps für den Einsatz von Google Fonts

1 | 
Gegensätze ziehen sich an, das gilt erst Recht für Fonts. Erst durch Unterschiede entsteht die gewünschte Spannung. Kommt man auf die Idee, zwei einander ähnliche Schriften miteinander zu vermählen, geht die Sache meist schief. Das Ergebnis wirkt komisch, irgendwas scheint nicht zu stimmen, der Leser wird irritiert.

2 |
Die Schriften müssen zum Inhalt passen. Man kleidet sich dem Anlaß entsprechend. Logisch oder? Das stimmt auch, wenn man mit einem Pärchen hantiert. Allerdings hat man mehr Möglichkeiten, Widersprüche zu riskieren.

3 |
Man spricht nicht umsonst von Font Pairing oder Schriftpaarungen, denn mit noch mehr Schriften als zwei wird es schwierig. Drei oder weitere Fonts zu mischen, sollte man den Profis überlassen.

4 |
Du kannst du solche Paarungen auch in der Textverarbeitung oder in Präsentationen einsetzen. Nur mit dem eBook wird es schwierig, sofern man nicht auf Bilder zurückgreifen will. Der Font für einen Fließtext lässt sich zwar einbetten, aber ob die Reader sich daran halten? Letztlich gelten die Einstellungen des Nutzers und der kann die beste Absicht guten Designs schnell zunichtemachen.

Beispiele: empfohlene Kombinationen nach Font Customizer

  • Lobster + Droid Sans (more pairings)
  • Bitter + Source Sans Pro (more pairings)
  • Dancing Script & EB Garamond (more pairings)
  • Dosis + Open Sans (more pairings)
  • Fjalla One + Open Sans (more pairings)
  • Lato + Grand (more pairings)
  • Oswald + Droid (more pairings)

Und wenn dir das noch nicht genügt, dann habe ich noch 25 Beispiele. Variationen dieser Art eignen sich für Beitragsbilder, Visuals, Illustrationen, Präsentationen, Buchcover, eBook-Cover oder für Social Media. Nicht geeignet sind sie für Fließtext (den Textblock), dort gelten andere Regeln.

Die folgenden Muster sind keine Regeln, sondern sollen als Anregung für deine eigenen Experimente dienen. Aus den über 1400 Schriftarten lässt sich einiges zaubern.

expletus-antic-slab dosis-droid-regular kelly-slab-lilita-one yanone-kaffeesatz-rambla play-bold-quicksand sofia-ramabhadra ek-mukta-raleway-dotsfredoka-cagliostro ubuntu-rochester note-this-bree iceland-cabin homenaje-aclonica  Lobster-Dosis bitter-sofia fjalla-opensans josefin-latosarpanch-roboto baumans-josefin droid-passion-one lancelot-dosis khand-exo-2  lilita-one-ruthieasap-cagliostro  khand-philosopher

Weitere Ideen, diesmal in Farbe:

google-font-kombinationen

Sven Lennartz

Sven Lennartz

Sven Lennartz ist Begründer von Dr. Web sowie Schriftsteller, Lyriker, Fachautor, Blogger und Unternehmer. Neben Dr. Web hat er auch andere Magazine wie das Smashing Magazine, Photoshop Weblog oder Conterest mitbegründet und aufgebaut. Conterest gibt es bei Amazon als eBook: Bekenntnisse eines Bloggers.

Inhaltsverzeichnis

Lust auf mehr?

Mockups — So passt du vorgefertigte Designs schnell an 📲 Hier sind 30 Downloads

Auf einem globalen Marktplatz mit einer schier unendlich hohen Anzahl an Themes und Templates fällt es selbst den talentiertesten Designern schwer, sich gegen die Konkurrenz abzugrenzen. Eine auffällige Produktpräsentation kann da Wunder wirken.

Wie ich Beitragsbilder fürs Blog erstelle

Beitragsbilder sind für jedes Blog wichtig. Sie verleihen ihm ein Gesicht und lassen die Posts interessanter aussehen.

Welche Arten von Bild und Grafik gibt es für Blogpostings?

Blogpostings ohne Grafiken kommen heute kaum noch vor. Auch wenn sie nicht ganz ausgestorben ist, viele Freunde hat die Textwüste nicht mehr. Umso zahlreicher sind die Möglichkeiten, Abbildungen in ein Posting zu bekommen.

Schreibe einen Kommentar Antworten abbrechen

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

Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich

Agentur nach Schwerpunkt finden

  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden
  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting