Lesefortschritt:

Font-Special 3: Google-Schriftarten suchen und kostenlos nutzen

15. August 2021 | CSS-Stylesheet, Fonts & Icons

Dieser Beitrag beinhaltet 707 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.

Google führt ein umfassendes Fontverzeichnis mit derzeit rund 1050 Schriftarten jeglicher Form. Die Fonts sind allesamt kostenlos erhältlich und lassen sich ganz einfach in die eigene Website einbinden.

Die Auswahl ist schier unbegrenzt. Im Google-Fontverzeichnis finden Sie Schriftarten mit Serifen und solche ohne, Handschriften sind ebenso vorhanden wie Display-Fonts und natürlich können Sie auch nach den Zeichensätzen suchen – um sicher zu sein, dass alle besonderen Zeichen Ihrer Sprache dargestellt werden können.

Um die Schriften besser vergleichen zu können, empfehlen wir Ihnen die Eingabe eines eigenen kurzen Texts, wie er dereinst auch auf Ihrer Website erscheinen könnte. Achten Sie darauf, dass Sie auch Umlaute oder andere von Ihnen verwendete Sonderzeichen eingeben, damit Sie deren Darstellung beurteilen können.

Klicken Sie auf die gewünschte Schriftart. Es öffnet sich nun ein Fenster mit der Übersicht über alle verfügbaren Styles, welches der Font bietet. Wählen Sie alle Auszeichnungen (Select this style) und schon bietet Ihnen Google in der Spalte rechts die nötigen Angaben zum Einbinden des Fonts.

Wenn Sie weitere Schriftarten wünschen – etwa wenn Sie unterschiedliche Fonts für Titel und Fliesstext verwenden möchten – gehen Sie zurück ins Fontverzeichnis, suchen Sie die nächste(n) Schriftarten, klicken Sie auf deren Vorschau und fügen Sie den Font erneut mit «Select this style» hinzu. Google aktualisiert dabei laufend die benötigten Angaben zum Einbinden des Fonts.

Wenn Sie fertig sind, hat Ihnen Google zweierlei Codes erstellt:

  • einen als <link>,
  • und einen als @import.

Wir empfehlen Ihnen die <link>-Version, da diese mittlerweile gebräuchlicher ist. Den Code können Sie 1:1 kopieren und im <head>-Bereich Ihrer Website einfügen. Damit «kennt» Ihre Website die gewünschten Fonts und kann sie darstellen. Für die Anweisungen im CSS-Stylesheet liefert Google auch gleich unterhalb des Link- oder Import-Codes die nötigen Angaben mit.

Und zu guter Letzt können Sie die gewählten Schriftarten auch gleich downloaden. Das ist vor allem dann interessant, wenn Sie den/die Font/s auch in Word & Co. verwenden möchten, oder wenn Sie vorhaben, die Schriftarten lokal in Ihrer Website einzubinden, damit diese nicht bei jedem Aufruf Google bemühen muss. Es kann auch aus datenschützerischen Überlegungen sinnvoll sein, die Verbindungen zwischen Ihrer Website und dem Google-Fontverzeichnis zu kappen.

Ein Zusatztipp für Divi-User: Standardmässig arbeitet das Divi-Theme mit dem Schriftartenkatalog von Google. Falls die Fonts bei Ihnen nicht in der Auswahl erscheinen, können Sie diese unter Divi/Theme-Optionen/Google-Schriftarten verwenden aktivieren.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This