Font einbinden

McFrost

Hallo die Runde

Muß nach langer Zeit doch wieder was fragen.
Ich habe jetzt mal versucht, eine Schrift einzubinden, die ich habe, ein anderer User aber vielleicht nicht.
Hatte ich nie gebraucht, nun doch mal.
So dachte ich freilich, da gibts mittlerweile keine Probleme. Es geht aber mit dem Fox nicht, mit dem IE dagegen sofort.
Ich habe also diesen Font (wird nur zum testen verwendet) in ein Verzeichnis hochgeladen, dort drin ist auch die Testdatei.

CSS :
@font-face { font-family: 'myfrac'; src: url('http://www.letterchip.de/fonts/fettefra.ttf') format('truetype');
}
@font-face { font-family: 'myfrac'; src: url('http://www.letterchip.de/fonts/fettefra.ttf') format('truetype');
font-style: italic; }
@font-face { font-family: 'myfrac'; src: url('http://www.letterchip.de/fonts/fettefra.ttf') format('truetype');
font-weight: bold; }

HTML :
<p style="font-family: 'myfrac'; font-style:italic;">MmÄägjilwß</p>
<p style="font-family: 'myfrac'; font-weight:bold;">MmÄägjilwß</p>

Habe dann im Server eine .htaccess abgelegt nach Web Empfehlung. Brachte nix.

Wo hab ich den Fehler?

Sören Hentzschel

Hallo,

Zitat von McFrost

Habe dann im Server eine .htaccess abgelegt nach Web Empfehlung. Brachte nix.

Nach welcher Empfehlung? Zeige uns bitte den relevanten Inhalt der .htaccess-Datei.

McFrost

Der Inhalt der verschiedentlich empfohlenen .htaccess -

<FilesMatch "\.(ttf|ttc|otf|eot|woff|svg)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "http://mysite.com"
</IfModule>
</FilesMatch>

(mysite entspr. angepaßt)

Sören Hentzschel

Zunächst einmal ist mysite.com ganz bestimmt nicht deine Webseite, insofern kann das so nicht stimmen. Du bindest die Schrift von letterchip.de ein, ist das deine Webseite? Dann würde ich es mit der Domain mal versuchen. Es ist mit so ungenauen Angaben leider ein bisschen ein Raten. Willst du eine Schrift von einer anderen Domain einbinden als die Domain, auf welcher die eigentliche Webseite liegt? Wenn das eh auf der selben Domain liegt, dann verwende relative Pfade.

McFrost

Zitat von Sören Hentzschel

Zunächst einmal ist mysite.com ganz bestimmt nicht deine Webseite,

Ich hab doch unten geschrieben -"angepaßt". Damit ich eben genau die htaccess so zeigen kann, wie original.

Sören Hentzschel

Stand der Hinweis von Anfang an da? Den hatte ich nämlich nicht gesehen. Also: letterchip.de ist deine Webseite oder geht es um eine andere Webseite und nur die Schrift liegt dort? Die Schrift ist unter einer anderen Domain erreichbar als die Seite selbst oder nicht? Denn wenn eh beides unter derselben Domain erreichbar ist, weiß ich nicht, wieso man sich mit CORS [1] rumschlagen sollte, relative Pfadangaben sollten das auch so lösen. Wenn es um unterschiedliche Domains geht, in der .htaccess-Domain steht die Domain der Webseite oder der Schrift?

[1] http://de.wikipedia.org/wiki/Cross-Origin_Resource_Sharing

McFrost

Die Webseite liegt (wie ich oben schrieb) im gleichen Ordner wie in der CSS als Pfad angegeben.

http://www.letterchip.de/fonts/font_test.html

Sören Hentzschel

Danke für den Testlink, das macht es wesentlich einfacher. CORS ist also überhaupt kein Problem, daran scheitert es nicht, die Schrift wird geladen, nur nicht angezeigt. Was mir als erstes auffällt, ist dass die Schriften mit dem falschen Content-Type ausgeliefert werden, nämlich als "plain". Ich könnte mir vorstellen, dass das ein Problem ist.

Probiere mal Folgendes in deiner .htaccess-Datei:

Code

<IfModule mod_mime.c>
  AddType application/x-font-ttf .ttf
</IfModule>

McFrost

Kein Erfolg

Ich habe nur den IFModule Teil gewechselt , war das richtig ?

Sören Hentzschel

Der Content-Type ist nun besser. Ich kann mir nur noch vorstellen, dass es an der Schrift selbst liegt, denn wenn ich in deiner @font-face-Deklaration die Schrift auf https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf änder (also eine andere *.ttf-Datei), dann funktioniert das. Keine Ahnung, wo genau es da klemmen könnte.

McFrost

Naja ich werd mal ein paar Schriften durchprobieren, vlt hängts grad an den zweien , die ich probiert hatte.
Frage zum Abschluß - TTF ist aber prinzipiell heute kein Problem mehr ? Oder sollte man sich um WOFF kümmern ?

Sören Hentzschel

WOFF ist auf jeden Fall vorzuziehen. Aber auch dann den entsprechenden Content Type mitsenden:

AddType application/font-woff .woff

McFrost

Oki, da probier ich mal noch diverses.
Danke für die Infos und tschö