00 Stimmen

CSS: @font-face funktioniert nicht auf dem Smartphone

Frage von Gast | 03.03.2016 um 15:51

Ich benutze auf meiner Website eine eigene Schriftart für Symbole, die ich durch CSS und @font-face eingebunden habe.

Das merkwürdige: Im Browser auf dem Computer funktioniert es, auf dem Smartphone in einem mobilen Browser dagegen nicht. Getestet habe ich sowohl auf dem Smartphone als auch auf dem Computer mit Firefox und Chrome.

Auf dem Computer werden alle Zeichen und Symbole richtig dargestellt, auf dem Smartphone geht gar nichts, es wird nur die Standardschrift angezeigt. 

Ich habe jetzt schon mit mehreren Schriftarten und Formaten gearbeitet, ich bekomme es aber nicht zum laufen. Das sind meine CSS-Regeln:

@font-face {
  font-family: 'MyWebFont';
  src: url('http://www.example.com/webfont.woff') format('woff'),
       url('http://www.example.com/webfont.ttf')  format('truetype');
}

Ich sehe beim besten Willen nicht was ich hier falsch mache und besonders stutzig macht mich, dass es ausschließlich auf mobilen Geräten nicht funktioniert. Dort habe ich ja noch nicht einmal die Möglichkeit vernünftig zu debuggen. Kann mir jemand helfen?

AntwortenPositivNegativ
Avatar
0Beste Antwort0 Stimmen

Dein CSS sieht erst einmal vernünftig aus und dass es auf deinem Computer funktioniert, spricht auch dafür, dass es nicht daran liegt.

Ich sehe allerdings, dass du die Schriften eventuell von einer externen Website einbindest. Das mögen einige mobile Browser nicht beziehungsweise nur dann, wenn der Reponse Header "Access-Control-Allow-Origin" gesetzt ist und das Okay für die Einbindung gibt.

Schreibe mal folgendes in deine HTACCESS-Datei hinein (die HTACCESS-Datei von der Seite, von der die Schriften ausgeliefert werden):

<FilesMatch "(.*)\.(ttf|otf|eot|woff)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Mit dem * sagst du, dass der Inhalt (in diesem Fall die Schrift bzw. alle Dateien mit den angegebenen Endungen) von allen Seiten angefragt werden kann und niemals blockiert werden soll. Stattdessen könntest du natürlich auch nur deine anfragende Seite (auf der die Schrift eingebettet werden soll) eintragen:

<FilesMatch "(.*)\.(ttf|otf|eot|woff)$">
Header set Access-Control-Allow-Origin http://www.example.com
</FilesMatch>

Eine Rolle spielt dieser Umstand immer dann, wenn eine Seite A einen Inhalt von einer anderen Seite B benutzen möchte. Wenn die Seite B diesen Zugriff nicht mit Access-Control-Allow-Origin erlaubt hat, kann es passieren, dass der Inhalt geblockt und nicht angezeigt wird.
03.03.2016 um 15:56

AntwortenPositiv Negativ
Antworten

Ähnliche Themen

Wichtiger Hinweis

Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.

Jetzt mitmachen

Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.