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

@fontface funktioniert nicht

Dieses Thema im Forum "Design" wurde erstellt von carolynn, 10. Mai 2018.

Schlagworte:
  1. carolynn

    carolynn Member

    Registriert seit:
    10. Mai 2018
    Beiträge:
    7
    Zustimmungen:
    0
    Hallo,

    ich habe ein Problem mit der Darstellung meiner Schriften. Ich möchte gerne die Schrift "Oranienbaum" auf meiner Webseite verwenden und habe diese heruntergeladen und per FileZilla auf meinen Server hochgeladen. Auf meinem PC wird die Schriftart korrekt angezeigt, auf sämlichen anderen PCs/ Smartphones jedoch nicht. Ich habe es in der Style CSS mit diesen Befehlen (und verschiedenen Abwandlungen) versucht:

    @font-face {
    font-family: 'Oranienbaum';
    src: url('/wp-content/themes/twentyseventeen-child/fonts/oranienbaum-v6-latin-regular.woff2') format('woff2'),
    url('/wp-content/themes/twentyseventeen-child/fonts/oranienbaum-v6-latin-regular.ttf') format('truetype'),
    url('/wp-content/themes/twentyseventeen-child/fonts/oranienbaum-v6-latin-regular.eot?') format('embedded-opentype'),
    url('/wp-content/themes/twentyseventeen-child/fonts/oranienbaum-v6-latin-regular.svg#Oranienbaum') format('svg')
    url('/wp-content/themes/twentyseventeen-child/fonts/oranienbaum-v6-latin-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    }

    Leider jedoch ohne Erfolg. ch wäre für Lösungsvorschläge dankbar, da ich immer nur auf die selben @fontface Befehle stoße... :(

    Vielen Dank!
    Caro
     
    #1 carolynn, 10. Mai 2018
  2. Marcus[IS]

    Marcus[IS] Well-Known Member

    Registriert seit:
    23. August 2009
    Beiträge:
    5.955
    Zustimmungen:
    175
    Hi,

    vermutlich wird die Schriftart auf dem einen PC korrekt angezeigt, da diese auf dem PC installiert ist und somit nicht aus dem Internet herunter geladen wird.

    Es könnte sein, dass der Pfad zum Aufruf nicht korrekt ist und deshalb die anderen Geräte den Zeichensatz nicht darstellen können.
    Hast du mal mit dem Entwicklertool des Browser geschaut, ob dort bezüglich des Font eine Fehlermeldung (vermutlich 404 not found) in der Konsole ausgegeben wird?

    Kannst auch den Link zur Seite hier rein setzen, dann können wir mal drauf schauen falls du mit dem Entwicklertool nicht so firm bist.
     
    #2 Marcus[IS], 10. Mai 2018
  3. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Als erstes fällt mir auf, dass hinter der Zeile mit svg ein Komma fehlt. Evtl. hilft das schon.
     
    #3 SirEctor, 10. Mai 2018
  4. carolynn

    carolynn Member

    Registriert seit:
    10. Mai 2018
    Beiträge:
    7
    Zustimmungen:
    0
    Hallo Marcus,
    vielen Dank für deine Antwort. die Seite heißt vanillapaper.de Kannst du da etwas erkennen?
    (Am Komma alleine liegt es leider nicht)
     
    #4 carolynn, 10. Mai 2018
  5. maxe

    maxe Well-Known Member
    Ehrenmitglied

    Registriert seit:
    1. Mai 2008
    Beiträge:
    19.581
    Zustimmungen:
    277
    die Pfade sind vermutlich falsch. Versuch es mal mit:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    #5 maxe, 10. Mai 2018
  6. carolynn

    carolynn Member

    Registriert seit:
    10. Mai 2018
    Beiträge:
    7
    Zustimmungen:
    0
    Das bringt leider auch nichts. Der Pfad müsste eigentlich stimmten, da ich ihn von Filezilla so übernommen habe und ich den Fonts Order auch beim Wordpress Editor sehen kann. Habe es so wie unten nun eingegeben, doch es tut sich nichts. Woran könnte es noch liegen, wenn nicht an einem falschen @font-face Befehl? Die Fontdateien können ja auch nicht "falsch" sein, denn sonst würde ich die Schriften ja in meinem Browser nicht sehen, wenn ich das richtig verstehe.
    upload_2018-5-10_19-38-36.png
     
    #6 carolynn, 10. Mai 2018
  7. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.660
    Zustimmungen:
    1.783
    Verwende wie von @maxe beschrieben in der Child-Theme style.css die Links url('fonts/oranienbaum-v6.. statt derzeit url('/fonts/oranienbaum-v6..

    Und setze die Definition nur an eine Stelle, derzeit ist sie an unterschiedlichen Stellen mit verschiedenen Pfaden vorhanden.

    Weiterhin wird die Child-Theme style.css derzeit zweimal eingebunden, auch das sollte man beheben.

    Weiterhin wird ein extra Plugin mit obskurer /?sccss=1 Einbindetechnik für Custom Styles verwendet, das ist komplett überflüssig, diese Funktion ist seit vielen Versionen von WordPress auch im normalen WordPress Customizer unter Zusätzliches CSS vorhanden, würde empfehlen, die in diesem Plugin eingetragenen Regeln in die Child Theme style.css oder in den Customizer zu übernehmen und das Plugin zu entfernen.
     
    #7 b3317133, 10. Mai 2018
    Zuletzt bearbeitet: 10. Mai 2018
    carolynn gefällt das.
  8. carolynn

    carolynn Member

    Registriert seit:
    10. Mai 2018
    Beiträge:
    7
    Zustimmungen:
    0
    Vielen Dank!!!! / wegzulassen, hat funktioniert :)
     

    Anhänge:

    #8 carolynn, 11. Mai 2018
  9. carolynn

    carolynn Member

    Registriert seit:
    10. Mai 2018
    Beiträge:
    7
    Zustimmungen:
    0
    Habe den CSS Code jetzt bei Zusätzliches CSS eingegeben, stattt Simple Custom CSS, ich hoffe das war das, was du mit dem obskurer geschrieben hast :)
    Heißt das ich habe das Child Theme falsch installiert oder kann ich die doppelte Einbindung der style.css nachträglich ändern. Wenn ja, wie? :eek:
     
    #9 carolynn, 11. Mai 2018
  10. maxe

    maxe Well-Known Member
    Ehrenmitglied

    Registriert seit:
    1. Mai 2008
    Beiträge:
    19.581
    Zustimmungen:
    277
    Warum läuft bei dir überhaupt ein Child-Theme? Nur wg. CSS?
     
    #10 maxe, 11. Mai 2018
  11. carolynn

    carolynn Member

    Registriert seit:
    10. Mai 2018
    Beiträge:
    7
    Zustimmungen:
    0
    Mhm also um ehrlich zu sein, wohl nur weil ich es in einer Installationsanleitung gelesen hatte und es so verstanden hatte, dass ich dann leichter CSS Änderungen einfügen kann, ohne dass diese bei der Aktualisierung des Parent Themes überschrieben werden. Keine gute Idee? :D
     
    #11 carolynn, 11. Mai 2018
  12. maxe

    maxe Well-Known Member
    Ehrenmitglied

    Registriert seit:
    1. Mai 2008
    Beiträge:
    19.581
    Zustimmungen:
    277
    nur wg. css kannst du das Child wieder löschen und alle css Änderungen ins Zusätzliche CSS eintragen.
     
    #12 maxe, 11. Mai 2018
  13. carolynn

    carolynn Member

    Registriert seit:
    10. Mai 2018
    Beiträge:
    7
    Zustimmungen:
    0
    Achso, ok. Vielen Dank für eure Hilfe!!
     
    #13 carolynn, 12. Mai 2018
(Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können. )
  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.
    Akzeptieren Weitere Informationen...
    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.
    Akzeptieren Weitere Informationen...
    Information ausblenden