Google Fonts einbinden: 3 einfache Wege (mit Code zum Kopieren)

Um eine Google-Schrift auf deiner Website einzubinden, brauchst du zwei kleine Schritte: die Schrift laden und deinem Text sagen, dass er sie benutzen soll. Laden kannst du sie mit einem <link>-Tag im Kopfbereich (dem head) deiner Seite, mit einer @import-Zeile ganz oben in deinem CSS oder aus Schriftdateien, die du selbst hostest. Am schnellsten kommst du an die exakten Zeilen mit der kostenlosen Erweiterung FontMee: Schrift auf deiner eigenen Seite ausprobieren, CSS kopieren drücken und einfügen. Unten findest du alle drei Wege, mit Code, den du unverändert kopieren kannst.

Was „eine Schrift einbinden“ wirklich heißt

Stell dir eine Schrift als Gast auf einer Party vor. Erst musst du sie einladen, das heißt, deine Seite muss die Schriftdatei herunterladen. Dann musst du ihr einen Platz geben, das heißt, deinem Text sagen, dass er sie benutzt. Lässt du die Einladung weg, taucht die Schrift nie auf. Lässt du den Platz weg, sitzt sie in der Ecke, während dein Text bei seiner alten Schrift bleibt.

Beides schreibst du in CSS, den Stilregeln, die einer Website sagen, wie sie aussehen soll. Die Einladung kommt in den head deiner Seite (ein unsichtbarer Bereich oben im HTML, in dem der Browser seine Anweisungen liest) oder ganz nach oben in deine CSS-Datei. Der Platz ist eine kurze Regel, wie in den Beispielen unten. Welchen Weg du auch nimmst, diese zwei Aufgaben bleiben gleich.

Weg 1: Ein Link-Tag im head deiner Seite

Das ist die Methode, die Google selbst auf seiner Website zeigt. Du setzt drei Zeilen in den head deiner Seite: zwei, die den Browser auf die Verbindung zu Google vorbereiten, und eine, die die Schrift lädt. Meist lädt das etwas früher als die anderen Wege, weil der Browser die Schrift schon anfordern kann, bevor er dein CSS gelesen hat.

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap">
  <style>
    h1, h2 { font-family: 'Lora', serif; }
  </style>
</head>

Der letzte Teil des Links, display=swap, sagt dem Browser, er soll deinen Text sofort in einer Ersatzschrift zeigen und die echte austauschen, sobald sie da ist, damit Besucher nie auf eine leere Fläche starren. Das Wort nach dem Komma in deiner Regel (serif) ist diese Ersatzschrift, und Google empfiehlt, immer eine anzugeben. Nimm diesen Weg, wenn du das HTML deiner Seite bearbeiten kannst.

Weg 2: Eine @import-Zeile ganz oben in deinem CSS

Manchmal kommst du nicht an den head der Seite, sondern nur ans CSS. So ist es beim Feld „Zusätzliches CSS“ in WordPress, im CSS-Bereich vieler Website-Baukästen oder bei einer einfachen style.css. Dann kann die Einladung stattdessen in deinem CSS stehen, als eine Zeile, die ganz oben stehen muss, vor allen anderen Regeln.

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap');

h1, h2 { font-family: 'Lora', serif; }

Sie lässt sich am einfachsten einfügen, ist aber meist einen Hauch langsamer als das Link-Tag, weil der Browser die Schrift erst entdeckt, nachdem er dein CSS gelesen hat. Auf einer kleinen Seite merkst du das kaum.

Weg 3: Die Schriftdateien selbst hosten

Hier lädst du die Schriftdateien von Google herunter, lädst sie auf deine eigene Website hoch und verweist darauf, sodass die Browser deiner Besucher gar nicht erst Kontakt zu Google aufnehmen. Manche wählen das wegen der Privatsphäre, manche wegen der Geschwindigkeit, und manche, weil die Regeln dazu von Land zu Land verschieden sind, prüfe also, was für deine Besucher gilt. Es sind ein paar Schritte mehr, aber nichts davon ist schwer: Du kopierst einen Ordner und fügst eine Regel hinzu, die sagt, wo die Datei liegt.

@font-face {
  font-family: 'Lora';
  src: url('fonts/lora-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

h1, h2 { font-family: 'Lora', serif; }

Google Fonts sind Open Source, du darfst sie also herunterladen und hosten, auch für kommerzielle Projekte. Mühsam ist, jede Datei zu finden und herunterzuladen und jeden @font-face-Block von Hand zu schreiben. FontMee erledigt das für dich, wie du gleich siehst.

Welchen Weg solltest du nehmen?

• Du kannst das HTML deiner Seite bearbeiten: nimm das Link-Tag (Weg 1).
• Du kannst nur CSS bearbeiten oder nutzt einen Website-Baukasten mit CSS-Feld: nimm @import (Weg 2).
• Du willst, dass die Browser deiner Besucher alles von deinem eigenen Server laden: hoste die Dateien (Weg 3).

Unsicher? Fang mit Weg 1 oder Weg 2 an. Du kannst später wechseln, und es ändert sich nur die eine Zeile, die die Schrift lädt.

Den exakten Code bekommst du mit FontMee

Diese Zeilen von Hand zu tippen ist die Stelle, an der die meisten Fehler passieren: ein fehlendes Pluszeichen, ein Schriftschnitt, den die Schrift gar nicht hat, eine Regel, die nicht zu deinen Überschriften passt. FontMee ist eine kostenlose Chrome-Erweiterung, ein kleines Zusatzprogramm, das dem Browser eine neue Funktion gibt, und sie schreibt dir die Zeilen. Du probierst eine Schrift zuerst auf deiner echten Seite aus, siehst, wie sie wirkt, und kopierst dann den Code für genau diese Auswahl. Sie hat über 1.900 Schriften, und das Video zeigt die Seitenleiste in Aktion.

1. Installiere FontMee. Füge sie im Chrome Web Store hinzu. Sie ist kostenlos und braucht kein Konto. Klicke in Chrome auf das Puzzle-Symbol und hefte sie an, dann ist sie immer einen Klick entfernt.
2. Öffne deine Website und klicke auf das FontMee-Symbol. Die Seitenleiste öffnet sich neben der Seite. Du kannst auch Alt + Shift + F drücken. Chromes eigene Seiten (neuer Tab, der Web Store, chrome://-Seiten) lassen sich nicht ändern.
3. Wähle, wohin die Schrift soll. Unter Änderungen anwenden auf wählst du Alles, Überschriften oder Fließtext und klickst eine Schrift an. Überschriften und Fließtext kannst du getrennt machen.
4. Prüfe es auf der echten Seite. Wechsle zwischen Originalschrift und FontMee-Vorschau und nutze Feinjustieren für Größe, Schriftstärke und Zeilenhöhe, bis es passt.
5. Drücke CSS kopieren. Es öffnet sich ein Fenster mit vier Tabs: CSS (der @import-Weg), HTML (der Link-Tag-Weg), Variablen und Tailwind für alle, die sie nutzen. Nimm den Tab, der zu deinem Weg passt, drücke In die Zwischenablage kopieren und füge es in deine Seite ein. FontMee fragt bei Google nur Schriftschnitte an, die die Schrift wirklich hat, du landest also nicht bei einem kaputten Link.
6. Du willst Weg 3? Drücke im selben Fenster ZIP zum Selbsthosten laden. Du bekommst einen Ordner mit den Schriftdateien, einer fonts.css, einer fontmee.css und einer kurzen README. Lade den Ordner hoch und füge die beiden Stylesheet-Links hinzu.

Vier Dinge, die du vor dem Veröffentlichen prüfen solltest

• Lade nur, was du benutzt. Jede zusätzliche Schrift und jeder zusätzliche Schnitt macht deine Seite etwas schwerer. Zwei Schriften und zwei Schnitte reichen für die meisten Seiten.
• Halte eine Ersatzschrift bereit. Beende jedes font-family mit einem allgemeinen Namen wie serif oder sans-serif, damit der Text auch während des Ladens gut aussieht.
• Prüfe die Buchstaben, die du brauchst. Akzente wie ł, č und ş sowie kyrillische oder vietnamesische Buchstaben stecken nicht in jeder Schrift. Sieh dir deine eigenen Wörter in FontMee an, bevor du kopierst.
• Prüfe die Lizenz. Google Fonts sind Open Source und für kommerzielle Nutzung frei. Das Code-Fenster von FontMee listet die Lizenz jeder Schrift auf, du siehst sie also vor dem Veröffentlichen.

Noch keine Website? Dann kommt die Schrift an zweiter Stelle. Eine Seite braucht außerdem ein Zuhause, und ein Baukasten ist der schnellste Weg dorthin, ganz ohne Code.

Hol dir die Erweiterung

FontMee ist kostenlos, mit über 1.900 Schriften, CSS kopieren in vier Formaten, einem ZIP zum Selbsthosten und dem Hochladen eigener Schriften. Kein Konto, kein Abo. Füge sie im Chrome Web Store hinzu oder lies zuerst die FontMee-Seite.

Gut zu wissen, bevor du loslegst

FAQ