Google Fonts einfach in WordPress einbinden (2022)

Damit dei­ne Word­Press Web­sei­te DSGVO-kon­­­form bleibt, soll­test du dei­ne Goog­le Schrift­ar­ten lokal ein­bin­den. Das Gan­ze ist auch gar nicht schwer und lässt sich mit weni­gen CSS Anga­ben und dem Word­Press Plug­in Asset Cle­a­nUp rei­bungs­lo­se umset­zen.

Spä­tes­tens mit dem Urteil des LG Mün­chen vom 20.01.2022 soll­test du hier aktiv wer­den und die Schrift­ar­ten lokal ein­bin­den.

Schritt 1: Welche Google Fonts werden auf deiner WordPress Seite geladen? #

Als ers­tes, musst du prü­fen, wel­che Schrift­ar­ten auf dei­ner Web­sei­te ver­wen­det wer­den. Hier­für kannst du die Ent­wick­ler­tools von Goog­le Chro­me ver­wen­den (auch Safa­ri, Ope­ra und Fire­fox ver­fü­gen über eine Ent­wick­ler­tools).

Öff­ne nun zunächst dei­ne Web­sei­te, auf der du prü­fen möch­test, ob Goog­le Schrift­ar­ten ein­ge­bun­den wur­den.

Anschlie­ßend wech­selst du zu den Ent­wick­ler­tools (F12 auf der Tas­ta­tur, alter­na­tiv kannst du die 3 Punk­te in der rech­ten obe­ren Ecke dei­nes Brow­sers ankli­cken und im Menü > Wei­te­re Tools > Ent­wick­ler­tools die Kon­so­le öff­nen).

Du soll­test jetzt ein neu­es Fens­ter mit den Ent­wick­ler­tools (Dev­Tools) sehen kön­nen.

In dem neu­en Fens­ter wählst du nun den Rei­ter Net­work (Netz­werk) > Fonts aus, um alle von der Web­sei­te gela­de­nen Schrift­ar­ten anzu­zei­gen. Anschlie­ßend lädst du die Sei­te neu (F5).

Jetzt erhältst du eine Abbil­dung aller Schrift­ar­ten, die gela­den wur­den. Über den Fil­ter kannst du das gan­ze ein­gren­zen, in dem du die Ergeb­nis­se nach dem Schlüs­sel­wort “gsta­tic” durch­suchst (Goog­le Schrift­ar­ten wer­den in der Regel über fonts.gstatic.com ein­ge­bun­den).

Auf unse­rer Bei­spiel­sei­te wird ledig­lich die Schrift­art “kar­la” von fonts.gstatic.com ein­ge­bun­den. Notie­re dir am bes­ten alle Schrift­ar­ten, die dir ange­zeigt wer­den. Im nächs­ten Schritt dreht sich alles dar­um, die Schrift­ar­ten her­aus­zu­su­chen und her­un­ter­zu­la­den.

Schritt 2: Google Fonts herunterladen #

Nach­dem du nun im ers­ten Schritt her­aus­ge­fun­den hast, wel­che Schrift­ar­ten ver­wen­det wer­den, musst du die­se natür­lich erst­mal her­un­ter­la­den.

Schrift­ar­ten wer­den in ver­schie­de­nen For­ma­ten TTF, WOFF, WOFF2, EOT und SVG ange­bo­ten. Das liegt dar­an, dass nicht alle Gerä­te alle For­ma­te unter­stüt­zen. Um für dei­ne Word­Press Web­sei­te die bes­te Kom­pa­ti­bi­li­tät zu gewähr­leis­ten, soll­test du daher immer dar­auf ach­ten, mög­lichst alle For­ma­te ein­zu­fü­gen.

Goog­le selbst bie­tet hier­bei nur das For­mat TTF als Down­load an. Abhil­fe schafft daher Web­sei­te Goog­le Web­fonts Hel­per.

Dort fin­dest du alle Goog­le Fonts zum Down­load in den ver­schie­de­nen For­ma­ten. Durch die Suche im lin­ken obe­ren Bereich hast du die Mög­lich­keit die Lis­te zu fil­tern. Gib dort nun den Namen der Schrift­ar­ten an, die du in Schritt 1 gefun­den hast.

Anschlie­ßend wählst du die pas­sen­de Schrift­art mit einem Klick aus.

Du siehst nun die Detail­an­sicht auf der Goog­le Web­fonts Hel­per Sei­te mit wei­te­ren Optio­nen. Hier kannst du neben dem Char­set und den gewünsch­ten Styl­es wäh­len. Außer­dem gene­riert dir die Sei­te auch die CSS Styl­es und ermög­licht dir das her­un­ter­la­den der Schrift­ar­ten.

Um fort­zu­fah­ren, wählst du jetzt die gewünsch­ten Styl­es aus und lade die Datei­en anschlie­ßend durch den Klick auf die Schalt­flä­che am Ende der Sei­te her­un­ter.

Das CSS in Schritt 3 benö­ti­gen wir spä­ter, sobald wir die Daten auf dei­ner Web­sei­te ein­pfle­gen. Es ist hilf­reich, die Sei­te offen­zu­las­sen, damit du spä­ter auch den Ord­ner ein­fach anpas­sen kannst (Feld: Cus­to­mi­ze fol­der pre­fix) und das CSS auto­ma­tisch neu gene­riert wird.

Schritt 3: Bereitstellen der Google Fonts auf deinem Webserver #

Als Nächs­tes musst die her­un­ter­ge­la­de­nen Schrift­ar­ten auf dei­nen Web­ser­ver hoch­la­den. Hier­für ver­wen­dest du idea­ler­wei­se ein FTP Pro­gramm (z.B. File­Zil­la, WS FTP oder vgl.).

Ver­bin­de dich daher mit dei­nem Ser­ver und wech­sel in das The­me Ver­zeich­nis dei­ner Word­Press Web­sei­te. Hier erstellst du einen neu­en Ord­ner, den du “fonts” nennst.

Anschlie­ßend wech­selst du in den Ord­ner und erstellst zur Über­sicht für jede dei­ner Schrift­ar­ten einen eige­nen Ord­ner. Dort kopierst du anschlie­ßend die Schrift­ar­ten, die du zuvor her­un­ter­ge­la­den hast, hin­ein.

Jetzt kopierst du dir noch den Pfad zu der Schrift­art. In unse­rem Bei­spiel lau­tet die­ser fol­gen­der­ma­ßen:

/wp-content/themes/storebiz/fonts/karla/

Die­sen kannst du jetzt beim Goog­le Web­fonts Hel­per im Feld “Cus­to­mi­ze fol­der pre­fix” hin­ter­le­gen, um das CSS zu gene­rie­ren. (Hin­weis: Ach­te unbe­dingt dar­auf, den “/” am Ende des Pfa­des mit anzu­ge­ben).

Schritt 4: CSS einbinden, um die Google Fonts lokal zu verwenden #

Damit die Goog­le Schrift­ar­ten, die wir zuvor über FTP hoch­ge­la­den haben, gela­den wer­den, musst du dei­ner Word­Press Web­sei­te via CSS mit­tei­len, wo die­se gefun­den wer­den. Dies erle­digst du zum Bei­spiel über die style.css dei­nes The­mes. Alter­na­tiv kannst du es auch im Word­Press Cus­to­mi­zer ein­pfle­gen.

Öff­ne hier­zu die style.css, die sich im Haupt­ver­zeich­nis dei­nes The­mes (Child-The­­mes) befin­det. Kopie­re den CSS Code an das Ende der Datei. Spei­che­re die Datei und lade sie erneut auf dei­nen Ser­ver.

Das war es auch schon — jetzt müs­sen wir nur noch die Auf­ru­fe zu den Goog­le Fonts auf dem CDN deak­ti­vie­ren.

Schritt 5: Deaktivieren des Ladens der Google Fonts via CDN #

Goog­le Fonts kön­nen über ver­schie­de­ne Wege in dei­ne Sei­te ein­ge­bun­den wer­den. Die bes­te Erfah­rung zum Deak­ti­vie­ren der Schrift­ar­ten haben wir bis­her mit dem Word­­Press-Plu­g­in Asset Cle­a­nUp gesam­melt. Das Plug­in hat bis­her alle Links bei unse­ren Test­sei­ten erkannt und ent­fernt.

Die kos­ten­lo­se Ver­si­on des Asset Cle­a­nUp Plug­ins kann direkt über den Word­­Press-Plu­g­in Mana­ger her­un­ter­ge­la­den und instal­liert wer­den.

Nach der Akti­vie­rung wech­selst du zu Asset Cle­a­nUp > Set­tings > Goog­le Fonts > Remo­ve All und schiebst den Reg­ler auf die rech­te Sei­te. Dadurch wird der HTML Code nun nach gän­gi­gen For­ma­ten des Goog­le Fonts Links durch­sucht. Tref­fer wer­den auto­ma­tisch ent­fernt.

Anschlie­ßend spei­cherst du die Ein­stel­lun­gen und leerst (falls vor­han­den) den Cache dei­ner Word­Press Web­sei­te.

Fazit #

Das war es auch schon. Du siehst, das ent­fer­nen von Goog­le Links ist in weni­gen Schrit­ten ohne Pro­gram­mier­kennt­nis­se mög­lich. Trotz allem soll­test du dei­ne Sei­te anschlie­ßend noch­mal auf even­tu­el­le Vor­kom­men von Goog­le Schrift­ar­ten prü­fen. Das Word­­Press-Plu­g­in Asset Cle­a­nUp fin­det zwar vie­le der Links, den­noch kann es auch hier und da pas­sie­ren, dass ein­zel­ne Links durch das Ras­ter fal­len. Dann hilft meist nur die indi­vi­du­el­le Kor­rek­tur.

Ger­ne kannst du uns kon­tak­tie­ren, falls du Hil­fe beim Ent­fer­nen der Links benö­tigst. Dann über­neh­men wir das für dich zum Fest­preis. Ver­ein­ba­re ein­fach ein Erst­ge­spräch.

Hilfreiche Links #

• https://de.wordpress.org/plugins/wp-asset-clean-up/
• https://google-webfonts-helper.herokuapp.com/fonts
• https://fonts.google.com/