@fontface funktioniert nicht

carolynn

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

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Marcus[IS]

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.

SirEctor

Als erstes fällt mir auf, dass hinter der Zeile mit svg ein Komma fehlt. Evtl. hilft das schon.

carolynn

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)

maxe

die Pfade sind vermutlich falsch. Versuch es mal mit:

Code

@font-face {
  font-family: 'Oranienbaum';
  src: url('fonts/oranienbaum-v6-latin-regular.ttf') format('truetype');
}

carolynn

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.

b3317133

Verwende wie von @maxe beschrieben in der Child-Theme style.css die Links [FONT=Courier New]url('fonts/oranienbaum-v6..[/FONT] statt derzeit [FONT=Courier New]url('[COLOR=#ff0000]/[/COLOR]fonts/oranienbaum-v6..[/FONT]

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.

carolynn

Vielen Dank!!!! / wegzulassen, hat funktioniert :)

carolynn

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:

maxe

Warum läuft bei dir überhaupt ein Child-Theme? Nur wg. CSS?

carolynn

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

maxe

nur wg. css kannst du das Child wieder löschen und alle css Änderungen ins Zusätzliche CSS eintragen.

carolynn

Achso, ok. Vielen Dank für eure Hilfe!!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

@fontface funktioniert nicht

Jetzt mitmachen!