Schriftarten mit einbinden

StefanTr

Hallo,
ich will eine Zapfino-Schriftart mit einbinden und habe die Schriftart in ein neu angelegtes Verzeichnis Fonts kopiert und dann in meine style.css folgende Zeilen eingefügt:

@font-face {
font-family: 'ZapfinoExtraLT-One';
src: url ("/fonts/ZapfinoExtraLT-One.otf") format("opentype");
}

#content .page .entry-header h1.entry-title {
font-family: ZapfinoExtraLT-One, sans-serif;

Es handelt sich hierbei um eine Opentype-Schriftart - geht dies nicht?
Weiß sonst jemand wie ich die Zapfino-Schriftart einbinden kann?

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

SirEctor

Schreib es mal so:
font-family: 'ZapfinoExtraLT-One', sans-serif;

Und heißt der Ordner Fonts oder fonts und stimmt der Pfad? Schau mal mit einem Dev-Tool (F12) nach. Sieht irgendwie falsch aus.

StefanTr

Ich hab nun einen Online-Konverter gefunden, welche die otf-Datei in eine Truetype-Schrift umwandeln kann.
Nun habe ich den Font in das neue Verzeichnis (fonts) kopiert und die style.css geändert:

@font-face {
font-family: 'zapfinoextraltone';
src: url ("/fonts/zapfinoextraltone.ttf") format("truetype");
}

#content .page .entry-header h1.entry-title {
font-family: zapfinoextraltone, sans-serif;
}

Damit funktioniert es aber auch nicht...

SirEctor

Hast du meine Antwort gelesen?

StefanTr

Der Ordner heißt "fonts" (kleingeschrieben), darauf habe ich geachtet. Der Ordner ist auch im child-Verzeichnis wie auch die style.css.

Bezüglich den Dev-Tools: was gibt es da an Möglichkeiten?

StefanTr

Habe nochmals den .otf-Font eingebaut und den font-Family-Hinweis so reingeschrieben wie vorgeschlagen. Aber auch das hat nichts gebracht.
Für mich stellt sich generell die Frage, ob otf-Fonts überhaupt in Wordpress verwendet werden können.
Finde dazu aber auch nirgends einen Hinweis und wäre froh wenn ich hier weiter kommen würde...

StefanTr

Hast Du noch einen Tip was das Font-Problem betrifft? Verzweifle nun bald. Der Kunde wünscht halt eine ganz spezielle Schriftart...

maxe

mal so probieren:

Code

@font-face {
font-family: 'zapfinoextraltone';
src: url ('fonts/zapfinoextraltone.ttf') format('truetype');
}


#content .page .entry-header h1.entry-title {
font-family: 'zapfinoextraltone', sans-serif;
}

Ansonsten schreib den Job in der Jobbörse aus, dann kann sich das mal eine/r direkt via FTP-Client anschauen.

StefanTr

Zuerst mal danke für die Antwort. Leider hat dies auch nichts gebracht - die Schriftart wird nicht korrekt angezeigt.
Für mich stellen sich zwei Fragen: Ursprünglich war es ja eine OpenType-Schriftart, welche ich dann in eine Truetype-Schriftart konvertiert habe. Ob es an der Konvertierung nun liegt weiß ich nicht - wie ist es denn generell: kann man Opentype-Fonts in Wordpress überhaupt verwenden? Überall lese ich zu Wordpress immer nur die Beschreibung zu Google Webfonts, aber nirgends etwas zu Opentype-Fonts.

Und dann noch wegen dem Hinweis zur "Jobbörse": was ist damit gemeint bzw. was muss ich tun?

StefanTr

Nun habe ich folgendes festgestellt:
Im Firefox wird der Font tatsächlich geladen - im InternetExplorer11 nicht.
Kennt jemand dieses Problem?

maxe

sowas alles wäre z.B. möglich:

Code

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

Vielleicht liegt's am iefix.

StefanTr

Habe das so übernommen, hat leider auch nichts gebracht - verstehe aber auch nicht was mit iefix gemeint ist.
Das ist doch zum verrückt werden ...:-(

Brawler

1. Wenn Du eine ordnungsgemäße Lizenz für die Webfont von Zapfino erworben hast, stehen Dir alle notwendigen Formate zur Verfügung (WOFF, EOT, TTF und SVG).
2. Mit dem Erwerb der Lizenz erhälst Du bei allen (!) Anbietern dezidierte Anleitungen, wie die Font eingebunden und genutzt werden kann.

Syntax zur Einbindung (als Ergänzung zu Maxe):

Code

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

Es gibt noch weitere Iterationen, aber das da oben funktioniert so einwandfrei.

Wenn Du keine Lizenz hast, solltest Du eine erwerben! Besonders bei LinoType! Die Kosten dafür (ca. 70 EUR) kannst Du ja an den Kunden durchschleifen.

PS: Die Tangerine (https://www.google.com/fonts/specimen/Tangerine) könnte eine Alternative sein, wenn auch nur entfernt.

StefanTr

O.k. danke für den Hinweis.
Das heißt OpenType-Fonts sind auch nicht frei verwendbar sondern müssen auch gekauft werden?

Monika

Zitat von StefanTr

O.k. danke für den Hinweis.
Das heißt OpenType-Fonts sind auch nicht frei verwendbar sondern müssen auch gekauft werden?

du musst dort wo du dir die Schrift holst auch Lizenz Hinweise finden, findet man sowas nicht, dann bin ich immer extrem skeptisch,

Brawler

Zitat von StefanTr

O.k. danke für den Hinweis.
Das heißt OpenType-Fonts sind auch nicht frei verwendbar sondern müssen auch gekauft werden?

Die Zapfino von Hermann Zapf ist weder kostenlos noch frei verwendbar

Siehe: http://www.linotype.com/61924/ZapfinoExtra-family.html
Alternativ: https://www.myfonts.com/fonts/linotype/zapfino-extra/

Bitte beachte, dass die Lizenzkosten pro Schriftschnitt sind und ein PageView-Limit haben! ;)

> https://www.myfonts.com/fonts/linotype…ensing.html#web

StefanTr

Vielen Dank für die Hinweise und die URLs.
Dann werde ich dort diese wohl erwerben...
Ich bin nur gespannt ob die Probleme mit der Einbettung des Fonts dann klappt; im Augenblick weiß ich ja noch immer nicht warum der Font im Firefox dargestellt wird und im IE nicht ...

Brawler

Dazu könnte ich Dir jetzt einen ganzen Roman verfassen. ;)

Der IE verwendet die native Windows-GUI und ist "nahtlos" in das Betriebssystem eingebunden. Und genauso kocht jeder Browser sein eigenes Süppchen - auch wenn sie sich im Großen und Ganzen mittlerweile mehr an Standards orientieren.

Wenn die Fonts dann alle funktionieren und Du mal die Bildschirmlupe bemühst, wirst Du feststellen, dass die gleiche Schriftart in den Browsern jeweils unterschiedlich dargestellt wird. Richtig, sie haben ein unterschiedliches Font-Rendering.

CSS behebt diese Problemchen für Menschen mit einem ausgeprägten Verständnis für Typographie: https://css-tricks.com/almanac/properties/t/text-rendering/

Und noch etwas für den FF aus meiner Knowledgebase: http://stackoverflow.com/questions/1145…refox-and-opera

Viel Erfolg!

PS: Wenn Du sichergehen willst, dass die Font/s auch tatsächlich richtig funktionieren, solltest Du die Schrift auf Deinem Rechner immer vorher deaktivieren oder deinstallieren!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Schriftarten mit einbinden

Jetzt mitmachen!