Schriftart mit @font-face einbetten

kirbinho

Einen schönen guten Abend! :)

Ich sitze schon den halben Tag daran, externe Schriftarten mittels @font-face einzubinden. Dazu habe ich mich an folgende Anleitung gehalten: http://www.elmastudio.de/typografie/sch…-funktionierts/

Die vier Teilfonts .eot, .svg, .ttf, .woff habe ich mittels FTP unter "/html/wordpress/fonts" abgelegt. Dementsprechend habe ich ganz oben im CSS folgendes eingegeben:

Code

@font-face {
    font-family: 'eausans_black';
    src: url('fonts/eau_sans_black.eot');
    src: url('fonts/eau_sans_black.eot?#iefix') format('embedded-opentype'),
         url('fonts/eau_sans_black.woff') format('woff'),
         url('fonts/eau_sans_black.ttf') format('truetype'),
         url('fonts/eau_sans_black.svg#eausans_black') format('svg');
    font-weight: normal;
    font-style: normal;
}

Im Anschluss habe ich im CSS testweise alle font-families auf die Neue "eausans_black" angepasst. Leider aber ohne Erfolg... ich sehe keine Veränderung geschweige denn den gewünschten Font. Habt ihr einen Rat für mich?
Der Link zur Seite ist http://www.gekreuztewege.de/wordpress.

Viele Grüße und ganz lieben Dank für eure Hilfe
Tobias

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

Melewo

Anleitungen sind zwar gut, hatte jedoch eine ähnliche mit ich nicht klar kam, der IE reagierte im Kompatibilitätsmodus nicht richtig, wenn alles zusammengefasst war. Und einfach mit in die style.css einfügen funktionierte ebenfalls nicht, musste dafür eine eigene CSS anlegen. Teste mal meine Anleitung:

http://www.coder-welten.com/web-fonts-ersetzen/

Ob diese Variante nun wirklich optimal ist, weiß ich zwar nicht, nur die funktionierte als einzige in den aufgeführten Browsern. Eine Rückmeldung, wie das Ergebnis ausfiel, wäre nicht schlecht.

kirbinho

Hey Melewo,

bin heute leider nicht zu Haus - habe mir deine Anleitung aber schon durchgelesen und werde es heute Abend oder spätestens morgen sofort probieren und hier Rückmeldung geben.

Wenn ich deine Anleitung befolge, kann ich nach erfolgreichem Einbau in der "originalen" style.css jeweils unter font-family der verschiedenen Bereiche (Menü-Container, Content box etc.) den Font-Namen angeben und es sollte funktionieren, oder?

Melewo

Zitat von kirbinho

kann ich nach erfolgreichem Einbau in der "originalen" style.css

In der style.css vom Theme hat es halt nicht geklappt und auch im Standard-Theme befinden sich @font-face in einer eigenen CSS-Datei. Dann ist ja auch der Speicherort wichtig, diese URL muss von der CSS aus erreichbar sein und nicht von der aufrufenden HTML-Seite.

kirbinho

Sooo, ich habe es probiert aber - leider ohne Erfolg. Irgendwie stelle ich mich vermutlich einfach mega blöde an. Habe nun Deine Anleitung, dann noch einmal das Einbinden mittels wp-cufon probiert aber nichts funktioniert. Ich verstehe das nicht, da ich es schon erfolgreich mittels der "Elmastudio"-Anleitung geschafft habe. Seltsam. :sad:

kirbinho

Moin Moin,

falls in Zukunft noch jemand ein ähnliches Problem haben sollte: bei mir funktionierts nun.

Ich hab das Theme nochmal komplett deinstalliert und bin erneut nach der Elmastudio-Anleitung vorgegangen. Mein (zugegeben dämlicher) fehler war wohl, dass ich die Fonts per ftp unter "wordpress/fonts" und nicht im Theme-Bereich unter "wp-content" abgelegt hatte. Total doof aber vielleicht stolpert ja von Euch auch noch einmal jemand darüber und diese Lösung hilft. :)

Lieben Dank noch einmal für die hilfe!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Schriftart mit @font-face einbetten

Jetzt mitmachen!