Wir haben bei unserem WordPress-Theme eine Google Fonts-Auswahl integriert. Da externe eingebettete Schriften – egal ob Google Fonts, Adobe Fonts etc. – die Ladezeit verschlechtern können und nicht immer DSGVO-konform sind, empfehle ich dir besondere Schriften intern zu hosten. Wie das geht, erkläre ich dir nun.
Vorbereitung
Zunächst solltest du 1-2 harmonierende Google Fonts definieren. Damit das Schriftbild passt, solltest du entweder den Empfehlungen von Google oder denen des Blogs Typewolf folgen. Um in Google die sog. „Pairings“ zu finden, klickst du auf den Titel einer Schriftfamilie und scrollst dann auf der Detailseite nach unten.
Wähle dabei insgesamt für beide Google Fonts nicht mehr als 5 Schriftgewichte, also bspw.
- Dünn 100
- Regulär 400
- Regulär Kursiv 400
- Medium 500
- Fett 700
Sobald du eine Schriftfamilie im Hauptfenster von Google Fonts ausgewählt hast, öffnest du die Familienbearbeitung rechts unten (in meinem Screenshot unter dem dunkelgrau hinterlegten „1 Family Selected“) und wählst unter dem Tab „Customize“ das Schriftgewicht aus, welches du nutzen willst. Google sagt dir praktischerweise rechts von den Tabs, wie groß der Einfluss auf die Ladezeit deiner Seite ist.
Externes Hilfetool
Mit dem Tool Google Webfonts Helper lassen sich die von uns vordefinierten Schriftstile lokal hosten. Dazu wählst du zunächst – wie aus Google Fonts bekannt – diejenigen Schriften aus, die du in deiner Seite integrieren willst (Nachdem du deine Schriftfamilie in der linken Spalte gefunden und angeklickt hast, wählst du das Gewicht in der Hauptspalte unter „Select styles“):
Anschließend änderst du das Verzeichnis-Präfix auf /fonts/ (also ohne den zwei Punkten davor) und lädst dann die Zip-Datei herunter und kopierst den CSS-Code (grau hinterlegt unter „Copy CSS“). Wenn du mehrere Schriften nutzen willst, wiederholst du den Schritt anschließend.
Anschließend entpackst du die Zip-Datei(en) mit den Schriften und öffnest mit einem FTP-Programm deinen Server. Dort gehst du in dein Theme-Verzeichnis unter /wp-content/themes/deintheme/ und kopierst die Dateien aus den ZIP-Ordnern in einen neuen Unterordner namens „fonts“. Das Verzeichnis, in dem dann die Google Schriftarten liegen, hat dann also den Pfad /wp-content/themes/deintheme/fonts/.
Öffne dann die style.css-Datei deines WordPress Themes entweder in WordPress unter Design / Editor oder am besten direkt aus dem FTP bspw. mit dem Dreamweaver.
Dort fügst du dann den CSS-Code ein, den du vom webfonts-helper kopiert hast. Darunter definierst du dann diejenigen Styles oder Schriften, die du mit den Google Fonts versehen willst, wie z. B. für den Fließtext:
html body,
body .site-content .content-area h1 strong {
font-family: 'Roboto', Helvetica, Arial, sans-serif;
font-weight: 400;
}Für Überschriften wäre die Formatierung demnach:
body .site-content .content-area h1,
body .site-content .content-area h2,
body .site-content .content-area h3 {
font-family: 'Roboto',Helvetica, Arial, sans-serif;
font-weight: 600;
}Wie du an der kommaseparierten Auflistung der Schriften nach der Font-Family erkennen kannst, nennt man zuerst den Namen deiner Google Schrift, wie im CSS Code vom webfonts-helper definiert (Achtung: Dieselben Anführungszeichen verwenden!), danach diejenigen Schriften, auf welche die Browser zurückfallen sollen, falls die Google Schriftarten nicht geladen werden können (sog. „Fallback“). Dann speicherst du nur noch und bist fast fertig.
Übrigens: Falls du bei den Schriften den Zeilenabstand von 1,4 em (em steht für die im Design-Customizer eingestellte Schriftgröße) bspw. auf doppelten Zeilenabstand für Fett-Formatierungen und Überschrift 2-Formatierungen verändern willst, kannst du das über folgende Formatierung vornehmen:
strong, h2 {
line-height: 2em;
}Statt dem em lässt sich die Zeilenhöhe aber auch mit Pixeln (px) definieren, wie z. B.:
strong, h2 {
font-size: 10px;
line-height: 20px;
}Datenschutzhinweise
So lange Google Fonts nicht nachweislich lokal gehostet werden, bedarf es immer einer Ergänzung der Datenschutzrichtlinie. Um herauszufinden, ob die Schriftarten noch von Google kommen oder schon von der eigenen Website, empfehlen wir die Prüfung der externen Ressourcen über WebpageTest.org:
Sobald fonts.googleapis.com im Wasserfall-Diagramm vorkommt, ist ein Datenschutz-Hinweis erforderlich, da auch persönliche Daten der Website-Besucher an den externen Server übertragen werden können. Hier ein Muster:
Google Web Fonts
Diese Seite nutzt zur einheitlichen Darstellung von Schriftarten sogenannte Web Fonts, die von Google bereitgestellt werden. Beim Aufruf einer Seite lädt Ihr Browser die benötigten Web Fonts in Ihren Browser-Cache (den Zwischenspeicher), um Texte und Schriftarten korrekt anzuzeigen. Zu diesem Zweck muss der von Ihnen verwendete Browser Verbindung zu den Servern von Google aufnehmen. Hierdurch erlangt Google Kenntnis darüber, dass über Ihre IP-Adresse unsere Website aufgerufen wurde. Die Nutzung von Google Web Fonts erfolgt im Interesse einer einheitlichen und ansprechenden Darstellung unserer Online-Angebote. Dies stellt ein berechtigtes Interesse im Sinne von Art. 6 Abs. 1 lit. f DSGVO dar. Wenn Ihr Browser Web Fonts nicht unterstützt, wird eine Standardschrift von Ihrem Computer genutzt. Weitere Informationen zu Google Web Fonts finden Sie unter https://developers.google.com/fonts/faq und in der Datenschutzerklärung von Google: https://www.google.com/policies/privacy/.