Goog­le Fonts stel­len bei jedem Auf­ruf dei­ner Sei­ten eine Ver­bin­dung zum Goog­le Ser­ver her und geben dabei Besu­cher­da­ten wei­ter. Da das mit Ein­füh­rung der DSGVO schon eini­ge Abmah­nun­gen nach sich zieht, willst du viel­leicht auch auf Num­mer Sicher gehen und die Goog­le Fonts lokal auf dei­nen eige­nen Ser­ver ein­bau­en. Das geht auch ganz leicht, wie ich dir in die­ser Schritt für Schritt Anlei­tung ganz detail­liert zei­gen wer­de. Du brauchst dazu ein FTP Pro­gramm wie File­zil­la und ein Child The­me oder einen the­meei­ge­nen CSS-Edi­tor.

 

1. Fin­de her­aus, wel­che Goog­le Schrif­ten auf dei­ner Web­site in Ver­wen­dung sind

Nach­dem du dei­ne Web­site in Chro­me auf­ge­ru­fen hast, drückst du die rech­te Maus­tas­te und dann „Unter­su­chen“.

Gehe zu „Sources“ — dort fin­dest du in der lin­ken Spal­te die Zei­len fonts.googleapis.com und fonts.gstatic.com

Wenn du da drauf klickst, erschei­nen rechts die Anga­ben zur font-fami­ly: hier siehst du die Schrift­art „Open Sans“ wur­de ver­wen­det. Wenn du die lin­ke Spal­te noch etwas brei­ter machst, kannst du dort auch die genau­en Schrift­ar­ten und Stär­ken her­aus­le­sen.

 

2. Lade dir die Goog­le Schrift­ar­ten auf dei­nen PC her­un­ter

Dazu ver­wen­de ich das Tool Goog­le Web­fonts Hel­per. Dort gibst du in der Such­zei­le dei­ne gewünsch­te Schrift­art ein:
(Hin­weis: Goog­le Web­fonts haben eine SIL Open Font Licen­se, die das Her­un­ter­la­den erlaubt.)

 

Kli­cke die Schrift­art an und wäh­le dann rechts unter Styles die Schrift­sti­le aus, die du auf dei­ner Web­site in Ver­wen­dung hast (sie­he oben font-weight)

Scrol­le nach unten zu 4. Down­load Files — damit lädst du die Schrif­ten auf dei­nen PC her­un­ter.

Wenn du ver­schie­de­ne Schrift­ar­ten brauchst, öff­ne dir dafür am bes­ten je ein eige­nes Fens­ter, denn wir brau­chen gleich noch von jeder Schrift den CSS Code.

Las­se in jedem Fall den Web­fonts Hel­per noch offen, damit wir gleich noch den CSS Code kopie­ren kön­nen.

 

3. Instal­lie­re dir ein Child The­me wenn du noch keins hast

(Tipp: nicht not­wen­dig, wenn dein The­me einen ein­ge­bau­ten CSS Edi­tor hat, dann kannst du den Code von Schritt 4 auch dort ein­fü­gen)

Schau zuerst unter Design-The­mes ob du bereits ein Child The­me ange­legt hast. Du erkennst es dar­an, dass nach dem The­me Namen noch Child dran steht. (z.B. Divi Child, Ava­da Child, Imp­re­za Child,…)

Wenn ja, sprin­ge wei­ter zu Punkt 4.

Wenn nicht, instal­lie­re und akti­vie­re das Plugin “Child The­me Con­fi­gu­ra­tor”

Du fin­dest es dann unter Werk­zeu­ge — Kind­the­men.

  1. Akti­on aus­wäh­len: wäh­le Neu­es Kind­the­ma erstel­len
  2. Eltern­the­ma aus­wäh­len: wäh­le das The­me aus, das du gera­de ver­wen­dest und kli­cke auf Unter­su­chen.

Wenn danach das grü­ne Häk­chen mit der Mel­dung “Die­ses The­ma scheint als Kind­the­ma in Ord­nung zu sein” erscheint, scrol­le ganz run­ter zu Pkt. 9 und kli­cke auf den But­ton “crea­te new Child The­me”

Im nächs­ten Schritt musst du zu Design — The­mes gehen und dort dein gera­de ange­leg­tes Child The­me akti­vie­ren. Das akti­ve The­me muss dein Child The­me sein.

 

4. CSS Code ein­bau­en

Gehe unter Design — Edi­tor und ach­te dar­auf dass rechts dein Child The­me aus­ge­wählt ist.
Wäh­le rechts die Datei style.css aus.
(Tipp: wenn du es mit dem the­mein­te­grie­ren CSS Edi­tor machst, dann öff­ne jetzt die­sen — anstatt der style.css Datei)

Geh zurück zur hof­fent­lich noch offe­nen Sei­te im Goog­le Web­fonts Hel­per und kopie­re dir den CSS Code den du unter Punkt 3 fin­dest, durch kli­cken in das Text­feld und Strg+C (kopie­ren)

Füge den Code in dei­ne Style.css Datei unter­halb des bereits vor­han­de­nen Tex­tes ein. (Strg + V = ein­fü­gen) Spei­che­re die Ände­run­gen.
(oder wenn du mit dem the­meei­ge­nen CSS Edi­tor arbei­test — füge ihn jetzt in dei­ne Cos­tum CSS ein)

Du kannst jetzt den Goog­le Web­fonts Hel­per schlie­ßen.

 

5. Ent­zip­pe den Schrif­ten­ord­ner, den du in Schritt 2 her­un­ter­ge­la­den hast

Lege dir einen Ord­ner an, wo du die Schrif­ten gleich hin­ein­zie­hen willst.

Öff­ne den zip-Ord­ner mit den her­un­ter­ge­la­de­nen Schrif­ten. Mar­kie­re sie alle (Strg + A) und zie­he sie mit der Maus in den neu­en lee­ren Ord­ner. Jetzt sind die Schrif­ten ent­zippt / ent­packt.

 

6. Lade die Schrif­ten auf dei­nen Ser­ver hoch

Öff­ne ein FTP Pro­gramm und mel­de dich mit den Zugangs­da­ten an, die du von dei­nem Hos­ter erhal­ten hast.
(Wenn du noch kein FTP Pro­gramm hat, kannst du dir hier das FTP Pro­gramm File­zil­la kos­ten­los her­un­ter­la­den.)

Lege dir im Haupt­ver­zeich­nis dei­nes Web­site Ord­ners (dh. wo auch die Ord­ner wp-con­fig, wp-admin,.. dei­ner Web­site lie­gen) ein neu­es Ver­zeich­nis an. Kli­cke dazu auf die rech­te Maus­tas­te — Ver­zeich­nis erstel­len.

Ich benen­ne die­sen Ord­ner “fonts” und öff­ne ihn.

Wäh­le links den Ord­ner aus, in dem dei­ne ent­zipp­ten Schrif­ten lie­gen. Mar­kie­re alle Schrif­ten (Strg+V) und lade sie durch kli­cken der “rech­ten Maus­tas­te — Hoch­la­den” in dei­nen soeben erstell­ten Ord­ner fonts hoch.

Die Goog­le Fonts kön­nen nun über dei­nen eige­nen Ser­ver gela­den wer­den. Dazu fehlt noch ein letz­ter Schritt:

 

7. Blo­ckie­re die Ver­bin­dung zum Goog­le Ser­ver

Da die Goog­le Schrif­ten noch immer über dein The­me gela­den wer­den, müs­sen wir das jetzt blo­ckie­ren. Das geht mit ver­schie­de­nen Vari­an­ten. Ich stel­le dir hier 3 Vari­an­ten vor:

a) Man­che The­mes haben die Mög­lich­keit die Goog­le Schrif­ten in den The­me-Optio­nen zu deak­ti­vie­ren

b) Du ver­wen­dest das Plugin “Aut­op­ti­mi­ze”, das eigent­lich dazu da ist, dei­ne Web­site schnel­ler zu machen. Doch unter dem Punkt “Extra” fin­dest du auch die Mög­lich­keit Goog­le Fonts zu ent­fer­nen.

c) Du ver­wen­dest das Plugin “Remo­ve Goog­le Fonts Refe­ren­ces”

 

8. Kon­trol­lie­re, ob noch eine Ver­bin­dung zum Goog­le Ser­ver her­ge­stellt wird.

Wie bereits in Schritt 1 unter­su­chen wir die Web­site in zB. Chro­me mit rech­te Maus­tas­te — Unter­su­chen — Sources und schau­en nach, ob links die Zei­len fonts.googleapis.com und fonts.gstatic.com noch vor­han­den sind.

Wenn sie noch zu sehen sind, wen­de in Schritt 7 eine ande­re Vari­an­te an.

Wenn die Ver­bin­dung erfolg­reich blo­ckiert wur­de und die Schrif­ten jetzt über dei­nen Ser­ver gela­den wer­den, dür­fen die Zei­len fonts.googleapis.com und fonts.gstatic.com hier nicht mehr auf­schei­nen.

Hat bei dir alles geklappt? Ich freue mich, wenn du mir ein Kom­men­tar hin­ter­läßt oder mei­nen Bei­trag teilst!

Tipps und Angebote zu deiner WordPress Website, die verkauft.

 

Schließe dich meinen Abonnenten an!

Nur noch 1 Schritt: Bitte überprüfe dein E-Mail-Postfach und bestätige deine E-Mailadresse.