There are 1052 different Google Font families available for free (at the time of this writing). That’s a ton of choices! So it’s no wonder you need help finding the needle in the haystack with a list of the best Google Fonts.
We have it for you, and then we’ll share some best practices for using Google Fonts in WordPress as well .
Choosing a font is more than just an aesthetic choice – it can have a significant impact on your website’s bounce and conversion rates, especially if you choose a font that is difficult to read. Therefore, it pays to take a little time to choose the perfect Google Fonts family for your website, rather than the first font you come across.
If you need even more fonts, check out our post on 50+ modern fonts for your WordPress website .
Why use Google Fonts?
There are thousands of font repositories out there, so what exactly is it that makes Google Fonts so special?
Erstens: Es ist kostenlos! Außerdem werden die Google Fonts von Google gepflegt und bereitgestellt, was bedeutet, dass sie garantiert sicher sind. Natürlich gibt es eine Menge fragwürdiger Webseiten, auf denen du kostenlose Schriftarten herunterladen kannst, aber wer weiß, was du dir mit diesen Dateien noch alles einfängst?
Auch die Qualität der Schriftarten auf solchen Webseiten kann manchmal fragwürdig sein.
Google hat eine Auswahl von über tausend hochwertigen Schriftarten zusammengestellt. Wenn du kein Grafikdesigner mit einem perfekten Auge für Typografie bist, ist es eine sicherere Wahl.
Zweitens gibt es keine verworrenen Lizenzbeschränkungen. Alle Schriftarten im Google Fonts-Katalog sind Open Source und können in kommerziellen Projekten frei verwendet werden. Du kannst sie herunterladen oder auf deiner Webseite einbetten und sie sogar in Druckprojekten verwenden.
Obwohl es keine einheitliche Lizenz gibt, nutzen die meisten Fonts im Repository die Open Font License.
Andere „kostenlose Schriftarten“ sind selten kostenlos und kommen mit einem ganzen Host verwirrender Lizenzbeschränkungen, die dich in Teufels Küche bringen können, wenn du einen Fehler machst. Leider haben Google Fonts nicht denselben Ballast.
Und schließlich ist es mühelos, Google Fonts über die Google Fonts API zu deiner Webseite hinzuzufügen. Alternativ kannst du sie auch einzeln herunterladen und per FTP/SFTP auf deinen Webserver hochladen.
Google Fonts sind zwar eher einfach und vielleicht nicht so auffällig wie einige kostenpflichtige Fonts, aber es übertrifft auf jeden Fall die websicheren Fonts, die bei den meisten Betriebssystemen vorinstalliert sind, die gleichen Fonts, die jeder schon tausendmal gesehen hat.
Worauf du bei einer Google Schriftart achten solltest
Wenn es eine Sache gibt, die du lernen solltest, wenn du eine Webseite gestaltest, dann ist es, wie du einen Google Font auswählst, der für dein Projekt geeignet ist. Eine gute Typografie kann deine Webseite ausmachen oder zerstören.
Es mag wie ein unwichtiges Detail erscheinen, aber es kann den Unterschied ausmachen, ob jemand deine Webseite frühzeitig verlässt oder ob er bleibt und ein treuer Leser oder Kunde wird.
Die Wahl der richtigen Schriftart ist etwas, das Grafikdesigner jahrelang beherrschen, aber wenn du ein paar Grundsätze beachtest, kannst du eine schöne Schriftart für deine Webseite auswählen.
- Passt zu deiner Marke: Dies ist vielleicht der kritischste Aspekt. Die besten Webseiten haben eine Schriftart, die ihre Persönlichkeit zum Ausdruck bringt und trotzdem lesbar ist und zum aktuellen Design passt. Zum Beispiel verwenden Apple und Iron Maiden sehr unterschiedliche Schriftarten, aber beide passen zu ihrer Marke.
- Lesbarkeit: Das zweitwichtigste Prinzip ist die Lesbarkeit. Eine verrückte Fantasie- oder Schmuddelschrift kann sicherlich zu deiner Marke passen, aber wenn deine Besucher es nicht lesen können, werden sie schnell wieder gehen. Deshalb müssen deine Schriftarten professionell und lesbar sein.
- Schriftart-Klassifizierung: Obwohl es hunderte von Möglichkeiten gibt, eine Schriftart zu klassifizieren, sind dies die fünf Haupttypen: Serif, Sans-Serif, Script, Monospace und Dekorativ. Eine Skript- oder Serifenschrift vermittelt Eleganz, während Monospace-Schriften auf technischen Webseiten beliebt sind. Wenn du diese Klassifizierungen kennst, hast du einen besseren Startpunkt für deine Suche.
- Display oder Body Font: Display-Schriften sind für große Formate, Kopfzeilen oder Druckprojekte gedacht. Sie können es sich leisten, weniger lesbar zu sein, um des einzigartigen Designs willen. Die Hauptdirektive von Body Fonts ist die Lesbarkeit, da sie den Großteil deiner Webseite ausmachen werden.
- Stimmung und Intention: Wie bei jeder künstlerischen Arbeit, entwerfen Künstler Schriften für bestimmte Stimmungen und Situationen. Die meisten Schriftarten werden mit Hinweisen geliefert, wie sie entworfen wurden und wie du sie verwenden kannst. Nutze sie, um zu entscheiden, ob die Schriftart zu deinem Projekt passt.
Die 10 besten Google Fonts im Jahr 2024 (Meinung der Allgemeinheit).
Wie erstellt man also eine Liste der besten Google Fonts, wenn so viel davon subjektiv ist? Wir wollen nicht, dass diese Liste voreingenommen ist, also werden wir uns auf die Daten stützen, um eine Liste der beliebtesten Google Fonts zu erstellen.
Wir werden die Google Fonts-Analysen nutzen, um der Weisheit der Allgemeinheit zu vertrauen. Mit über 50 Billionen Gesamtaufrufen von Fonts hat Google ein paar Daten, aus denen wir schöpfen können.
Dann gehen wir ein wenig über die reinen Beliebtheitszahlen hinaus und wählen einige aufstrebende HTML-Fonts aus, die an Popularität gewinnen.
Bist du bereit? Dann lass uns eintauchen!
1. Roboto
Der Dauerbrenner auf Platz 1 und Kinstas Schriftart der Wahl ist Roboto, eine serifenlose Schrift von Christian Robertson, die Google als Systemschrift für Android entwickelt hat. Sie ist mittlerweile sehr beliebt, es gibt sie in 12 verschiedenen Stilen und sie taucht immer wieder in den Google Fonts-Analysen auf.
Zum Beispiel ist Roboto die beliebteste Schriftart. Aber Roboto Condensed ist auch die sechstbeliebteste Schriftart, und Roboto Slab taucht auch auf Platz 12 auf!
2. Open Sans
Open Sans Condensed ist eine gut lesbare Schriftart, die von Google in Auftrag gegeben wurde und von ihrem Vorgänger Droid Sans inspiriert ist. Google verwendet Open Sans auf einigen seiner Webseiten und in seinen Print- und Web-Anzeigen. Open Sans Condensed, ihre Schwesterschrift hier, hält auch den dreizehnten Platz der beliebtesten Schriften bei Google Fonts.
3. Lato
Lato ist eine weitere beliebte Wahl von Łukasz Dziedzic. Sie hat eine ganz besondere Geschichte hinter ihrem Design und balanciert widersprüchliche Ziele aus, was zu einer einzigartigen, leichten serifenlosen Schrift führt.
4. Montserrat
Montserrat ist eine serifenlose Schrift von Julieta Ulanovsky, die im gleichnamigen Stadtteil von Buenos Aires lebt. Mit 18 verschiedenen Stilen, die von Light bis Heavy reichen, hast du eine ziemlich große Auswahl.
5. Oswald
Oswald ist eine serifenlose Schrift, die ursprünglich von Vernon Adams entwickelt wurde. Es wurde mit dem ausgeprägten Alternate Gothic Stil im Hinterkopf entworfen, was durch seine fetten Striche deutlich wird.
6. Source Sans Pro
Source Sans Pro ist eine serifenlose Schrift, die für Adobe entwickelt wurde und die erste Open Source-Schrift von Adobe ist. Sie wurde von Paul Hunt entwickelt und ist durch ihre leichte Schrift sauber und gut lesbar.
7. Slabo 27px/13px
Slabo ist eine Serifenschrift, die von John Hudson von Tiro Typeworks entwickelt wurde. Diese Schriftart ist speziell für bestimmte Größen entwickelt worden – entweder 27px oder 13px, je nach deinen Bedürfnissen.
8. Raleway
Mit 18 verschiedenen Stilen ist Raleway eine weitere großformatige serifenlose Schrift, die ursprünglich von Matt McInerney entworfen wurde. Wenn du Raleway magst und nach etwas Einzigartigem suchst, bietet Raleway Dots ein ähnliches Styling mit einem gepunkteten Ansatz, der für große Überschriften funktionieren kann.
9. PT Sans
Die PT Sans wurde für die öffentlichen Schriften der Russischen Föderation entwickelt und enthält daher sowohl lateinische als auch kyrillische Zeichen. Es gibt auch einige andere Schriftarten in der PT-Familie, darunter einige Serifenoptionen.
10. Merriweather
Der Name Merriweather erinnert an ein angenehmes Design, und genau das ist es, was die Designer beabsichtigt haben. Die Merriweather Sans ist zwar nicht ganz so populär, aber sie ist ein Schwesterprojekt, das außergewöhnlich gut zu ihr passt.
Bonus-Schriften + Neuzugänge
Den Zahlen nach sind die zehn oben genannten Fonts die beliebtesten Google Fonts. Aber wenn man nur die beliebtesten Optionen anzeigt, tut man den großartigen aufstrebenden Fonts einen Gefallen, die noch nicht die Aufmerksamkeit bekommen haben, um in den Analysen aufzutauchen.
Hier sind einige unserer Favoriten, die es nicht an die Spitze der Analyse geschafft haben.
11. Noto Sans / Serif
Noto ist eine von Google in Auftrag gegebene Schriftart, die es sowohl in Serifen- als auch in serifenlosen Versionen gibt. Sie wird regelmäßig aktualisiert und es gibt mittlerweile weit über 100 Noto-Schriften, und es kommen ständig neue hinzu!
Das Ziel von Noto ist es, alle Alphabete und Zeichen verschiedener Sprachen abzudecken, während sich ihr ausgeprägtes Design harmonisch in hunderte von verschiedenen Schriftfamilien einfügt. Zu diesen Derivaten gehören die beliebte Noto Sans KR und Noto Sans JP.
12. Nunito Sans
Nunito Sans ist eine serifenlose Schrift, die schnell an Beliebtheit gewinnt. Ihre Nutzung hat sich zwischen 2018 und 2019 verdreifacht, und sie wird jedes Jahr beliebter.
13. Concert One
Concert One ist eine abgerundete Groteskschrift, die sich hervorragend für Überschriften eignet. Ihr unkonventionelles Design ist ein echter Blickfang.
14. Prompt
Promt ist eine serifenlose Schrift von der thailändischen Kommunikationsdesignfirma Cadson Demak. Es ist loopless (das thailändische Äquivalent zu sans-serif) und beinhaltet sowohl thailändische als auch lateinische Zeichen.
15. Work Sans
Work Sans ist eine serifenlose Schrift, die für die Verwendung auf Bildschirmen optimiert ist. Die Designer empfehlen die Verwendung der mittelschweren Stile für alles von 14px-48px.
Wie man die besten Google Fonts Kombinationen erstellt
Wenn du dachtest, dass es schwer ist, eine Schriftart von Google Fonts auszuwählen, dann warte, bis du versuchst, sie auf deiner Webseite zu kombinieren! Zum Glück ist das kein Problem, das du lösen musst (außer du willst es). Du kannst einige Möglichkeiten nutzen, um die besten Google Fonts Kombinationen zu finden.
Erstens schlägt die Webseite von Google Fonts selbst beliebte Paarungen vor, wenn du auf der Seite nach unten scrollst:
Darüber hinaus kannst du auch eine Webseite wie Font Pair nutzen, um weitere Vorschläge zu erhalten.
Best Practices für die Verwendung von Google Fonts in WordPress
Sobald du die perfekte Schriftart für dein Projekt gefunden hast, findest du hier einige Best Practices für die Verwendung von Google Fonts in WordPress.
Beschränke die Anzahl der verwendeten Schriftschnitte
Einige dieser Schriftarten – wie Montserrat und Raleway – werden mit 18 verschiedenen Schriftschnitten geliefert. Das ist zwar gut, um dir Optionen zu geben, aber du willst nicht alle 18 Schriftschnitte auf deine WordPress Seite laden, weil es die Ladezeiten verlangsamt.
Das Befolgen dieser Richtlinie ist sehr wichtig!
Für die meisten Schriftarten gilt die Faustregel, dass du maximal drei Schnitte verwenden solltest:
- Regulär
- Kursiv
- Bold
Viele WordPress Seiten, die wir heutzutage sehen, verzichten sogar auf kursiv und verwenden einfach zwei verschiedene Schriftschnitte.
Wenn du Google Fonts selbst einbettest, kannst du genau auswählen, welche Schriftschnitte du einbinden möchtest. Zuerst besuchst du eine Schriftart-Seite und klickst dann auf Diesen Stil auswählen neben der gewünschten Schriftart.
Die meisten WordPress Themes beinhalten heute einfache Möglichkeiten, um auszuwählen, welche Google Fonts und Gewichte du verwenden möchtest. Aber nicht alle Theme-Entwickler sind auf die Performance fokussiert. In manchen Fällen kann es also besser sein, Google Fonts in deinem Theme zu deaktivieren und sie selbst hinzuzufügen.
Variable Fonts werden auch immer beliebter und werden von allen modernen Browsern unterstützt. Diese sind genial, weil es einer Schriftdatei erlaubt, sich mit verschiedenen Eigenschaften zu transformieren. Google Fonts bietet dir eine große Auswahl an variablen Schriftarten und du kannst deine Suche sogar auf diese beschränken.
Lokales Hosten von Google Fonts in Betracht ziehen
Als Alternative zum Ausliefern von Schriften von Googles Server kannst du die Schriften auch lokal hosten, was Performance-Vorteile bietet. Bedenke jedoch, dass die meisten Google-Schriften wahrscheinlich bereits in den Browsern der Nutzer zwischengespeichert sind. Wir empfehlen daher, die Leistung zu testen.
Wenn du eine andere Premium-Schriftart als Google-Fonts verwendest, wie z.B. die „Brandon“-Schriftart, die wir auf deiner Webseite verwenden, ist es am besten, sie lokal zu hosten (und sie von deinem CDN aus bereitzustellen). Mehr zu diesem Thema findest du in unseren Beiträgen über das lokale Hosten von Schriftarten.
Wähle eine Schriftart, die Updates erhält
Schriftarten sind wie WordPress Plugins und Themes – im Laufe der Zeit erhalten sie Updates und Verbesserungen, um sie noch besser zu machen. Auch wenn es bei weitem nicht so schlimm ist wie bei WordPress Plugins, kann es dennoch von Vorteil sein, eine Schriftart zu wählen, die regelmäßig Updates erhält. Die Noto-Familie von Google zum Beispiel wird seit 2014 regelmäßig aktualisiert.
Da die meisten Schriftarten auf dieser Liste beliebt sind, ist es wahrscheinlich, dass jede Schriftart auf dieser Liste regelmäßige Updates und Verbesserungen erhält. Und wenn du dich entscheidest, von der Liste abzuweichen, ist es nie eine schlechte Idee, sicherzustellen, dass die Schriftart, die du wählst, populär genug ist, um Aufmerksamkeit zu bekommen.
Vergiss die Barrierefreiheit nicht
Laut der Weltgesundheitsorganisation leben nach Daten aus dem Jahr 2015 geschätzte 253 Millionen Menschen mit einer Sehbehinderung: 36 Millionen sind blind und 217 Millionen haben eine mittlere bis schwere Sehbehinderung. Darüber hinaus ist die Zahl der Menschen mit irgendeiner Form der Beeinträchtigung bis 2024 auf 2,2 Milliarden gestiegen.
Wenn du Google Fonts verwendest, kannst du mit CSS steuern, wie es aussieht, z.B. Farbe und Größe. Vergiss also nicht, die Web Content Accessibility Guidelines (WCAG) 2.0 zu befolgen. Das wird sicherstellen, dass deine Inhalte für jeden leicht zugänglich sind.
Wenn du diese Richtlinien befolgst, werden die Inhalte für ein breiteres Spektrum von Menschen mit Behinderungen zugänglich, einschließlich Blindheit und Sehschwäche, Taubheit und Schwerhörigkeit, Lernbehinderungen, kognitiven Einschränkungen, Bewegungseinschränkungen, Sprachbehinderungen, Lichtempfindlichkeit und Kombinationen davon. – Web Content Accessibility Guidelines (WCAG) 2.0
Eine kritische Leitlinie ist der Farbkontrast. Bei einem älteren Design der Webseite von Kinsta war unsere Schrift ein wenig zu hell, und die Besucher äußerten ihre Bedenken, da es schwer zu lesen war. Das Letzte, was du willst, ist, dass du tolle Inhalte veröffentlichst, nur damit es für die Augen der Besucher zur Belastung wird!
Du kannst ein Tool wie den Color Contrast Checker von WebAIM verwenden, um zu sehen, ob deine Schriftfarben die offiziellen Empfehlungen erfüllen. Du kannst zum Beispiel sehen, dass die Farben in unseren Blogbeiträgen den Test bestanden haben.👍
Wie man Google Fonts zu WordPress hinzufügt
Wenn du dich für eine oder zwei Schriftarten entschieden hast, musst du sie in deine Webseite einbauen. Dank Google Fonts ist diese Aufgabe noch einfacher als sonst.
Angenommen, du möchtest eine Schriftart auf deine Webseite bringen. In diesem Fall hast du drei Möglichkeiten: Installiere ein Plugin wie Easy Google Fonts oder Google Fonts Typography, verwende die Google Fonts API, um die Schriftart auf deine Webseite hochzuladen, oder lade sie manuell herunter und hoste sie auf deiner Webseite.
Wenn du wissen willst, wie du deine Schriftarten in WordPress ändern kannst, haben wir eine detaillierte Anleitung geschrieben, die dir dabei hilft.
Zusammenfassung
Google Fonts sind fantastisch und werden von Millionen von Webseiten genutzt. Sie machen das Web durch solide Typografie- und Ikonografieprinzipien angenehmer, offener, schneller und zugänglicher.
To ensure a better overall experience for your visitors, we recommend that you follow font best practices, such as limiting fonts, hosting fonts locally (if necessary), and following accessibility guidelines.
And now to you – what are your favorite fonts and font pairs from Google Fonts? Let us know in the comments below, and don’t forget to check out our in-depth guide to WordPress fonts !
Brian hat eine große Leidenschaft für WordPress, verwendet es seit über einem Jahrzehnt und entwickelt sogar einige Premium-Plugins. Brian liebt Blogging, Filme und Wandern. Verbinde dich mit Brian auf Twitter.
Schreibe einen Kommentar