WP <5.0 Google-Fonts lokal speichern und in style.css einbinden

Guten Abend zusammen

Vorneweg: ich bin ein DAU in Sachen Webseitenprogrammierung und kriege es einfach nicht hin die Google-Fonts ohne Plugin einzubinden. Die Suche habe ich benutzt, finde jedoch nicht genau das, was ich benötige.

Vorgeschichte
Ich habe mir vor einiger Zeit mit dem twentyseventeen-Theme meine Website (fertig ist aber nur www.c-ro.ch/reptiles) neu aufgebaut. Ich hatte mich damals nur oberflächlich mit den Themes, Plugins usw. beschäftigt, da mir das Standard-Theme eigentlich genügt hat. Im Zusammenhang mit der neuen DGVO möchte ich nun die Google-Fonts (welche ich per Plugin eingebunden habe) lokal auf meinem FTP-Server speichern und diese dann von meinem Server aus einbinden. Dazu habe ich die benötigten Schriften (Open Sans und Lato) in den verschiedenen Styles heruntergeladen und auf dem FTP-Server gespeichert. Anschliessend habe ich beim recherchieren herausgefunden, dass ich eigentlich ganz am Anfang ein Child-Theme hätte anlegen sollen, was ich nun heute nachgeholt habe. Im Child-Ordner habe ich die Schriften im Ordner "fonts_google" abgelegt und im style.css (auch im Child-Ordner) die Schriften eingetragen. Das besagte style.css findet ihr im Anhang.

Nun muss ich der Seite ja irgendwie vorgeben, welche Schriften wo und in welcher Grösse verwendet werden sollen. Wie mach ich das? Ich habe heute den ganzen Tag x Tutorials durchforstet, werde aber trotzdem nicht schlauer... So wie ich das verstehe, muss ich den Teil (des Parent-style.css), welcher die Typografie betrifft in das Child-style.css kopieren und anpassen oder nicht? Ich habe das heute versucht und den Typography-Teil aus dem parent css in das child css kopiert und anschliessend unter

font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
die Schrift OpenSans-Light eingetragen:
font-family: 'OpenSans-Light', "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;

Der Code, welchen ich vom Parent in das Child css übernommen habe:

Code:

Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

Könnte mir jemand aufzeigen, was ich falsch gemacht habe?

Für Fragen oder bei Unklarheiten stehe ich Euch gerne zur Verfügung.

Danke und Gruss
Chris

 

Danke für die Frage. Ich habe im angehängten style.css (child) diverse Schriften mit @font-face eingebunden. Meinst Du das?

 

Sorry für meine späte Antwort! Der Grund wieso OpenSans bei reptiles gefunden wird ist, dass dort noch das Plugin aktiv ist. Ich habe das Plugin nur für die Hauptseite deaktiviert und dort wird der Text auch nicht mit OpenSans dargestellt.

Gruss
Chris

 

Guten Morgen

Ich verstehe, dass es den Profi wahrscheinlich auf den Sack geht die einfachsten Sachen in WP zu erklären. Es würde mir auch reichen, wenn mir jemand eine tolle Tutorial-Seite zum korrekten Einbinden der Schriften (inkl. Zuweisung der einzelnen Schriften bei z.B. p, h1, h2 usw.) empfehlen würde. Dann kämpfe ich mich selber dort durch

Danke und Gruss
Chris

 

Vielen Dank! Dazu auch gleich Fragen:

reicht es denn, wenn ich bei der URL

Code:

Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

eingebe? Benötige ich nicht noch den genauen Pfad dazu?

Und in welchem Abschnitt trage ich dies im style.ccs ein? Einfach im Abschnitt "5.0 Typography"?

Gruss
Chris

 

Danke für deine Hilfe.
Ich habe in jedem Child-Theme-Ordner (für jede "Subkategorie", also reptiles, edv usw.) einen Ordner Namens Fonts_Google erstellt und die Schriften dorthin kopiert.

Ja ich weiss, sorry, ich habe mich zu ungenau ausgedrückt. Die Frage hätte lauten sollen: Kopiere ich den Abschnitt 5.0 aud dem parent-theme in das css des child-themes?

Gruss
Chrigu

 

Hallo zusammen

Danke für eure Hilfe. Also, ich habe es nun doch noch geschafft, dass die Schriftarten korrekt gefunden werden. Die 404-Fehler sind nun weg und mit dem Firefox-Entwicklerwerkzeug wird mir beim Text nun auch OpenSans-Light mit font-weight 300 angezeigt. Ich habe das Plugin EasyGoogleFonts bereits gelöscht, deshalb denke ich, dass die Schriftarten nun sicher lokal korrekt gefunden werden. Danke!

Jetzt das nächste Problem:
Es wird mir zwar angezeigt, dass ich OpenSans-Light (300) verwende, aber auf der Page selber ist es nie und nimmer OpenSans-Light 300. Die sollte nämlich so aussehen:


Tut sie aber nicht... was mache ich denn nun schon wieder falsch??

Gruss
Chris

 

Hi

Erst einmal; vielen Dank für deine Hilfe!

Mhm, das kapiere ich nicht. Wenn ich die Netzwerkanalyse öffne sehe ich dieses Bild:



Schaue ich am falschen Ort?

Den Text "/twentyseventeen-child/" habe ich im css noch ergänzt, danke!

Gleich noch eine Frage. Woher kommt folgender Eintrag mit den Franklin-Schriften (fonts.googleapis.com, vierte Zeile im oberen Screenshot)? Kommt der aus dem css des Parent-Themes? Ist das Standard bei Wordpress? Das würde ja dann bedeuten, dass ich bei einem Update des Themes diesen Eintrag wieder drin hätte... ich möchte aber alle Verbindungen zu google-Servern kappen...

Gruss
Chris

 

Ah super, danke. Wenigstens etwas
Wieso die Schrift auf der Seite aber noch falsch dargestellt wird, kannst Du mir nicht sagen?