Ein schneller Leitfaden zu Google Fonts 2023

‍Google Fonts ist ein unglaubliches Werkzeug für Web-Designer und Entwickler. Mit einer riesigen Auswahl an frei verwendbaren Schriftarten haben Sie die Freiheit, das Aussehen und Gefühl Ihrer Website oder Ihres Blogs zu gestalten. In diesem Artikel werden wir tiefer in die Welt von Google Fonts eintauchen und die besten Möglichkeiten zur Nutzung dieses leistungsstarken Tools erläutern.Was sind Google Fonts?

Google Fonts ist eine Bibliothek mit über 1000 freien Schriftarten, die von Google bereitgestellt werden. Diese Schriftarten können in Webseiten eingebettet werden, um das Aussehen und Gefühl der Textelemente zu verbessern. Eines der herausragenden Merkmale von Google Fonts ist, dass sie Open Source sind, was bedeutet, dass sie frei verwendet, heruntergeladen und sogar modifiziert werden können.

Warum sollte man Google Fonts verwenden?

Es gibt mehrere Gründe, warum Web-Designer und -Entwickler Google Fonts lieben:

1. Vielfalt: Mit über 1000 Schriftarten zur Auswahl gibt es für fast jeden Stil und jede Stimmung eine passende Schriftart.
2. Einfache Integration: Die Einbettung von Google Fonts in eine Webseite ist ein einfacher Prozess, der nur wenige Zeilen Code erfordert.
3. Optimiert für das Web: Google Fonts sind für schnelle Ladezeiten optimiert, was bedeutet, dass sie die Leistung Ihrer Website nicht beeinträchtigen.
4. Kompatibilität: Google Fonts sind mit allen modernen Webbrowsern kompatibel, was bedeutet, dass sie auf jedem Gerät gut aussehen.
5. Zugänglichkeit: Da Google Fonts frei verwendbar sind, können sie dazu beitragen, das Web für alle zugänglicher zu machen, unabhängig von Budget oder technischen Fähigkeiten.

Was sollte man bei der Auswahl einer Google-Schriftart beachten?

Bei der Auswahl einer Google-Schriftart sollten Sie einige wichtige Faktoren berücksichtigen:

1. Lesbarkeit: Die Schriftart sollte leicht zu lesen sein, insbesondere bei längeren Textabschnitten.
2. Stil: Der Stil der Schriftart sollte zur Markenidentität und zum Ton Ihrer Website passen.
3. Vielseitigkeit: Die Schriftart sollte in verschiedenen Größen und Gewichten gut aussehen.
4. Ladezeit: Einige Schriftarten können die Ladezeit Ihrer Website beeinflussen, insbesondere wenn sie viele Schriftschnitte haben.
5. Sprachunterstützung: Wenn Ihre Website in mehreren Sprachen verfügbar ist, sollten Sie sicherstellen, dass die gewählte Schriftart die benötigten Zeichensätze unterstützt.

Die 15 besten Google Fonts

Nach sorgfältiger Recherche und Analyse haben wir eine Liste der 15 besten Google Fonts zusammengestellt. Diese Schriftarten wurden aufgrund ihrer Schönheit, Vielseitigkeit, Lesbarkeit und Performance ausgewählt.

1. Roboto: Diese moderne, geometrische Schriftart ist wegen ihrer Klarheit und Lesbarkeit sehr beliebt.
2. Open Sans: Ein sauberes und neutrales Design macht diese Schriftart ideal für lange Texte.
3. Lato: Diese Schriftart bietet einen warmen und freundlichen Ton, der perfekt für Marken ist, die ein menschlicheres Gefühl vermitteln möchten.
4. Oswald: Diese Schriftart ist perfekt für Überschriften und bietet einen starken visuellen Impact.
5. Slabo 27px: Diese Schriftart ist speziell für den Einsatz bei 27px optimiert und eignet sich hervorragend für Bildschirmanzeigen.
6. Lora: Diese Schriftart kombiniert klassische Formen mit modernem Design und eignet sich hervorragend für lange Texte und Überschriften.
7. Raleway: Diese elegante Schriftart ist perfekt für modische Marken und Designprojekte.
8. Montserrat: Diese Schriftart ist inspiriert von den alten Plakaten und Schildern der Stadtviertel Montserrat in Buenos Aires.
9. PT Sans & PT Serif: Diese Schriftarten bieten eine klassische und professionelle Ästhetik, die ideal für redaktionelle und journalistische Zwecke ist.
10. Ubuntu: Diese Schriftart wurde speziell für die klare Anzeige auf Bildschirmen entwickelt und eignet sich hervorragend für technische und wissenschaftliche Projekte.
11. Merriweather: Diese angenehm lesbare Schriftart ist ideal für lange Texte und bietet eine warme und freundliche Atmosphäre.
12. Playfair Display: Diese Schriftart eignet sich hervorragend für Überschriften und Titel und bietet einen starken visuellen Impact.
13. Arvo: Diese serifenbetonte Schriftart bietet eine starke und robuste Ästhetik, die perfekt für Überschriften und Titel ist.
14. Muli: Diese minimalistische und effiziente Schriftart ist ideal für digitale Interfaces und kurze Textabschnitte.
15. Josefin Sans: Diese stilvolle und elegante Schriftart ist perfekt für modische Marken und Designprojekte.

Die besten Kombinationen von Google Fonts

Die richtige Kombination von Schriftarten kann das allgemeine Design Ihrer Website verbessern und ein kohärentes und harmonisches Aussehen schaffen. Hier sind einige der besten Kombinationen von Google Fonts, die Sie in Betracht ziehen sollten:

1. Roboto und Open Sans: Diese beiden Schriftarten ergänzen sich perfekt und bieten eine klare und moderne Ästhetik.
2. Oswald und Lato: Die kühne und auffällige Oswald passt perfekt zur warmen und freundlichen Lato.
3. Montserrat und Merriweather: Die moderne und geometrische Montserrat harmoniert gut mit der klassischen und lesbaren Merriweather.
4. Raleway und Lora: Die elegante Raleway und die klassische Lora bieten eine ausgewogene und stilvolle Kombination.
5. Playfair Display und Roboto: Die auffällige Playfair Display passt perfekt zur klaren und minimalistischen Roboto.

Lokales Hosting von Google Fonts mit WordPress

Das lokale Hosting von Google Fonts in WordPress bietet mehrere Vorteile, darunter eine schnellere Ladezeit und eine bessere Datenschutzkonformität. Anstatt die Schriftarten direkt von den Google-Servern zu laden, können Sie sie auf Ihren eigenen Server herunterladen und von dort aus einbinden. Dies reduziert externe HTTP-Anfragen, was die Website-Leistung verbessern kann. Zudem haben Sie mehr Kontrolle über die verwendeten Schriftarten und können sicherstellen, dass sie immer verfügbar sind, selbst wenn der Google Fonts-Dienst ausfällt. Es gibt verschiedene WordPress-Plugins und manuelle Methoden, um Google Fonts lokal zu hosten:

Einbindung mit einem Plugin (empfohlen)

Die einfachste Methode, Google Fonts lokal in WordPress zu hosten, ist die Verwendung eines Plugins wie “OMGF”. Das Plugin OMGF hat den Charme, das automatisch alle Schriftarten identifiziert und lokal eingebunden werden. Zudem ist das Plugin kostenlos. Nach der Installation und Aktivierung des Plugins navigieren Sie einfach zu den Einstellungen und klicken auf “Starte Optimierung”. Anschließend sind alle Google Fonts lokal eingebunden. So einfach kann es gehen!

Achtung (!): Einige Anwendungen, wie z.B. Google Maps, laden die Schriftarten Inline. D.h., dass das Plugin die Schriftarten für solche Anwendungen nicht lokal laden kann. Sie erhalten bei OMGF einen Warnhinweis, wenn dies der Fall ist. Wie man am besten damit umgeht, ist umstritten. Am sichersten wäre es, die Anwendung erst nach Einwilligung zur Datenerklärung zu aktivieren, also z.B. einen Button vor der Aktivierung mit Link zur Datenschutzerklärung einzufügen. Das kann aber technisch anspruchsvoll sein. Eine einfache Lösung hierzu bietet etwas das kostenpflichtige Consent Tool Plugin Borlabs Cookie an. Einfacher ist es sicherlich, wenn möglich, auf eine solche Anwendung zu verzichten oder alternative Anwendungen ohne Inline geladene Schriftarten zu verwenden. Bei Fragen hierzu helfen wir im Rahmen unserer Wartungspakete sehr gerne!

Manuelle Methode (nicht empfohlen)

1. Schriftarten herunterladen: Besuchen Sie die Google Fonts-Website und wählen Sie die Schriftarten aus, die Sie verwenden möchten. Laden Sie sie als ZIP-Datei herunter.
2. Dateien entpacken und hochladen: Entpacken Sie die ZIP-Datei und laden Sie die .woff oder .woff2 Dateien in ein Verzeichnis innerhalb Ihres WordPress-Themes hoch, z.B. in einen Ordner namens “fonts”.
3. CSS-Datei bearbeiten: Öffnen Sie die style.css Datei Ihres WordPress-Themes und fügen Sie die @font-face Regel ein, um die lokal gespeicherten Schriftarten zu referenzieren. Zum Beispiel: @font-face { font-family: 'Ihre Schriftart'; src: url('Pfad/zur/Schriftart.woff2') format('woff2'), url('Pfad/zur/Schriftart.woff') format('woff');
4. Schriftart im Theme verwenden: Jetzt können Sie die Schriftart im CSS Ihres Themes verwenden, indem Sie die font-family Eigenschaft stzen: body { font-family: 'Ihre Schriftart', sans-serif; }

Durch die manuelle Methode haben Sie mehr Kontrolle, aber es erfordert ein bisschen mehr technisches Know-how im Vergleich zur Plugin-Methode.

Lokales Hosting von Google Fonts mit Elementor

Elementor ist ein beliebtes WordPress-Page-Builder-Plugin, das auch ein Feature zum lokalen Hosting von Google Fonts bietet. Dies kann die Ladezeiten Ihrer Website verbessern, da die Schriftarten direkt von Ihrem Server und nicht von den Google-Servern geladen werden.

Um Google Fonts lokal mit Elementor zu hosten, gehen Sie zu Elementor > Benutzerdefinierte Schriftarten > Add New und laden Sie die Schriftarten im entsprechenden Format hoch. Die Schriftarten können Sie auf der Website von Google Fonts kostenlos herunterladen. Bennen Sie die Schriftart so, dass Sie sie später wiederkennen können, z.B. Roboto (lokal). Anschließend können Sie im Elementor Editor die neu hinzugefügte Schriftart aus der List auswählen.

Tipp: Am einfachsten ist die Einbindung Stand 09/2023 mit dem in der Basisversion kostenlosen Plugin “OMGF”. Daher empfehlen wir vorzugsweise diese Methode.

Zusammenfassung

Google Fonts ist ein leistungsstarkes Werkzeug für Web-Designer und -Entwickler, das eine Vielzahl von Möglichkeiten zur Verbesserung des Aussehens und der Anmutung Ihrer Website bietet. Ob Sie eine moderne, klassische, kühne oder dezente Ästhetik bevorzugen, es gibt eine Google-Schriftart, die zu Ihrem Stil passt. Mit sorgfältiger Auswahl und korrekter Anwendung können Google Fonts dazu beitragen, das Design Ihrer Website zu verbessern und eine einzigartige und ansprechende Benutzererfahrung zu bieten.