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?
Ähnliche Themen
Schriftarten für Windows, Linux und Mac im Web
Artikel | 0 Kommentare
CSS-Stylesheets in HTML einbinden
Tutorial | 0 Kommentare
Website Performance: Javascript und CSS komprimiert ausliefern und Ladezeiten verkürzen
Tutorial | 0 Kommentare
Bilder, CSS, JS und Seiten neu laden trotz Browser-Cache
Tipp | 2 Kommentare
jQuery: CSS Stylesheet Switcher
Tutorial | 1 Kommentar
HTML5 Canvas: Einsteiger Tutorial Teil 4 - Text auf Canvas schreiben
Tutorial | 0 Kommentare
Hintergrund einer Website verdunkeln (Gray Out Effekt)
Tutorial | 0 Kommentare
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.
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):
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:
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