1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

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

Dieses Thema im Forum "Design" wurde erstellt von croch, 24. Juni 2018.

  1. croch

    croch Member

    Registriert seit:
    24. Juni 2018
    Beiträge:
    18
    Zustimmungen:
    1
    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
     

    Anhänge:

  2. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.341
    Zustimmungen:
    419
  3. croch

    croch Member

    Registriert seit:
    24. Juni 2018
    Beiträge:
    18
    Zustimmungen:
    1
    Danke für die Frage. Ich habe im angehängten style.css (child) diverse Schriften mit @font-face eingebunden. Meinst Du das?
     
  4. the5kyliner

    the5kyliner Active Member

    Registriert seit:
    18. September 2012
    Beiträge:
    36
    Zustimmungen:
    1
    Hallo Chris,

    Dein Vorgehen (also die Styles aus dem parent Theme ins child Theme zu kopieren und dann anzupassen) sollte auf jeden Fall richtig sein.

    Wenn ich mir deine gepostete Url aber so ansehen, fällt mir zunächst mal auf, dass die Pfade zur Lato Schrift bspw. nicht gefunden werden. Gesucht wird hier: https://c-ro.ch/reptiles/wp-content/themes/fonts_google/lato-v14-latin-regular.woff2

    Augenscheinlich sieht das falsch aus, da die Schriften im themes Ordner gesucht werden. Normalerweise packt man die aber in den Ordner des jeweiligen Themes. Also in den Ordner deines Child Themes. Es sei denn du hast bewusst diese Ordnerstruktur gewählt. Das weißt aber eben nur du. Wenn die Schriften nicht im themes Ordner, sondern in deinem Child Theme liegen, müssen die Pfade in deiner child style.css angepasst werden.
    Aus '../fonts_google/lato-v14-latin-300.eot' wird dann bspw. 'fonts_google/lato-v14-latin-300.eot'.

    Ansonsten wird die Schrift "Open Sans" in deiner Seite gefunden und auch eingebunden. Nämlich beim Text "Schon seit meiner Kindheit beschäftige ich mich mit der Haltung von Reptilien[...]". Ich weiß nicht ob das die selbe ist wie "OpenSans-Light". Aber wenn ich den Light Namen dort eintrage (über die Chrome Entwickler Tools), wird zumindest die selbe Schriftart verwendet. Irgendwas scheint er da also korrekterweise zu finden.

    Ich hoffe mit diesen Tipps kommst du ein bisschen weiter.

    Viele Grüße
    Nick
     
  5. croch

    croch Member

    Registriert seit:
    24. Juni 2018
    Beiträge:
    18
    Zustimmungen:
    1
    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
     
  6. croch

    croch Member

    Registriert seit:
    24. Juni 2018
    Beiträge:
    18
    Zustimmungen:
    1
    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 :D

    Danke und Gruss
    Chris
     
  7. maxe

    maxe Well-Known Member
    Ehrenmitglied

    Registriert seit:
    1. Mai 2008
    Beiträge:
    19.581
    Zustimmungen:
    277
    z.B.
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  8. croch

    croch Member

    Registriert seit:
    24. Juni 2018
    Beiträge:
    18
    Zustimmungen:
    1
    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
     
  9. maxe

    maxe Well-Known Member
    Ehrenmitglied

    Registriert seit:
    1. Mai 2008
    Beiträge:
    19.581
    Zustimmungen:
    277
    wo liegt denn die open-sans-v15-latin-300.ttf auf dem Server?

    Die style.css deines Child Themes hat doch gar keinen Abschnitt 5.0 :confused:
     
  10. croch

    croch Member

    Registriert seit:
    24. Juni 2018
    Beiträge:
    18
    Zustimmungen:
    1
    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
     
  11. maxe

    maxe Well-Known Member
    Ehrenmitglied

    Registriert seit:
    1. Mai 2008
    Beiträge:
    19.581
    Zustimmungen:
    277
    kopieren brauchst du nichts, setze einfach überall wo du die Schrift verwenden willst die font-family
     
  12. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    2.721
    Zustimmungen:
    445
    Zum ansehen - im oberen Teil die beiden grünen 200 sind die von google geladenen Fonts.
    Die 404er unten sind offensichtlich die von dir eingebundenen Schriften, die nicht gefunden werden, ich sage mal falscher Pfad bzw. falscher Speicherplatz von fonts_google Ordner. Rechts siehst du wohin der Pfad geleitet wird ....
    upload_2018-6-29_15-4-24.png
     
    #12 SEpp55, 29. Juni 2018
    Zuletzt bearbeitet: 29. Juni 2018
  13. croch

    croch Member

    Registriert seit:
    24. Juni 2018
    Beiträge:
    18
    Zustimmungen:
    1
    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:

    180630_OpenSans-Light_300.png
    Tut sie aber nicht... was mache ich denn nun schon wieder falsch?? :D

    Gruss
    Chris
     
  14. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    2.721
    Zustimmungen:
    445
    Offensichtlich noch nicht ganz! Mit dem Firefox sind bei mir entweder mit der Netzwerkanalyse oder der Konsole noch 404er zu sehen!

    Screen der Konsole.
    upload_2018-6-30_13-18-49.png
    Da scheint mir ein "/twentyseventeen-child" zuviel zu sein...
     

    Anhänge:

  15. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    2.721
    Zustimmungen:
    445
    ....... und hier scheint auch noch ein wenig Korrekturbedarf zu sein!
    Auszug aus deiner Child-css im Vergleich mit dem Webfonts-helper.
    upload_2018-6-30_13-44-36.png
     

    Anhänge:

  16. croch

    croch Member

    Registriert seit:
    24. Juni 2018
    Beiträge:
    18
    Zustimmungen:
    1
    Hi

    Erst einmal; vielen Dank für deine Hilfe!

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

    180630_ff_netzwerkanalyse.png

    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
     
  17. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    2.721
    Zustimmungen:
    445
    Bei mir sind die 404er jetzt auch nicht mehr zu sehen!

    Woher der Eintrag der Franklin-Schriften kommt kann ich nicht sagen.
    Vielleicht hilft dir das weiter - LINK.
     
  18. croch

    croch Member

    Registriert seit:
    24. Juni 2018
    Beiträge:
    18
    Zustimmungen:
    1
    Ah super, danke. Wenigstens etwas
    Wieso die Schrift auf der Seite aber noch falsch dargestellt wird, kannst Du mir nicht sagen?
     
  19. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    2.721
    Zustimmungen:
    445
    Laut deiner Child - style.css hast du keine Schrift "OpenSans-Light" eingebunden! Du mußt die selbe font-family Bezeichnung verwenden, die du in der style.css verwendet hast! Sonst wird sie nächste Schrift die in font-family eingetragen ist und gefunden wird verwendet!
    LINK 1
    LINK 2
    Die Lösung, die ich hier gefunden habe verwende ich selbst. Der Autor beschreibt die bekannten Schritte aber auch wie das ganze in ein Plugin gepackt wird!!! Das gibts auch zum Download im Step 7!!! Ist im Prinzip wie in den meisten Anleitungen nur ist alles in einem Ordner (mit Unterordnern) aber übersichtlich alle mal!
     
    #19 SEpp55, 2. Juli 2018
    Zuletzt bearbeitet: 2. Juli 2018
  20. nature225

    nature225 Well-Known Member

    Registriert seit:
    15. Dezember 2017
    Beiträge:
    407
    Zustimmungen:
    27
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden