@ Font-Face funktioniert nicht auf Handy

Question

Hier ist mein Code, es funktioniert perfekt auf dem Desktop und Tablet, aber nicht auf dem Handy. Ist es der Code oder haben einige Schriftarten funktionieren nicht auf mobilen

@font-face { 
    font-family: 'Out'; 
    src: url('http://location/Outstanding.otf'); 
} 

Answer 1

Sie müssen alle src hinzufügen benötigt Gesicht wie dieses Beispiel Schriftart:

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

Quelle: https://css-tricks.com/snippets/css/using-font-face/
Hoffe, es hilft , Prost.

(Wenn Sie die Schriftart, die Sie werde müssen die https://www.fontsquirrel.com/tools/webfont-generator konvertieren müssen)

Answer 2

Sie haben nicht enthalten (vorausgesetzt, Sie sie haben) alle notwendigen Font-Dateien:

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

So * .ttf fehlt für Safari/IOS etc.