web-dev-qa-db-fra.com

@ font-face ne fonctionne pas dans le Webkit mobile

Je ne parviens pas à obtenir @font-face dans n'importe quel navigateur Webkit mobile que j'ai testé - Safari sur iPhone 3GS, le navigateur Android 2.2 par défaut et le navigateur Dolphin sur Android.

Cela fonctionne dans tous les navigateurs de bureau, de IE7 à IE9, FF3.5, Safari 4 et Opera.

Les polices et CSS proviennent de FontSquirrel:

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('../fonts/League_Gothic-webfont.eot');
    src: local('☺'),
        url('../fonts/League_Gothic-webfont.woff') format('woff'),
        url('../fonts/League_Gothic-webfont.ttf') format('truetype'),
        url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatinModernRoman10Bold';
    src: url('../fonts/lmroman10-bold-webfont.eot');
    src: local('☺'),
        url('../fonts/lmroman10-bold-webfont.woff') format('woff'),
        url('../fonts/lmroman10-bold-webfont.ttf') format('truetype'),
        url('../fonts/lmroman10-bold-webfont.svg#webfonthCDr6KZk') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatinModernRoman10BoldItalic';
    src: url('../fonts/lmroman10-bolditalic-webfont.eot');
    src: local('☺'),
        url('../fonts/lmroman10-bolditalic-webfont.woff') format('woff'),
        url('../fonts/lmroman10-bolditalic-webfont.ttf') format('truetype'),
        url('../fonts/lmroman10-bolditalic-webfont.svg#webfontegrLi3sm') format('svg');
    font-weight: normal;
    font-style: normal;
}

J'ai vérifié l'ID SVG dans la source de police SVG, et ils correspondent tous.

Est-ce que c'est peut-être parce que j'ai des règles d'espacement des lettres plus tard dans le CSS?

Merci!

iphoneandroidcssfont-facemobile-webkit
14
bigsweater

En fin de compte, la syntaxe était fausse. Je suis tombé sur cette solution via Twitter:

 http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

Cela a fonctionné parfaitement. Je viens d’archiver tous les principaux navigateurs et mes polices apparaissent, y compris sur Android et iOS.

Maintenant, mon CSS se lit comme suit: 

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('../fonts/League_Gothic-webfont.eot#') format('eot'),
        url('../fonts/League_Gothic-webfont.woff') format('woff'),
        url('../fonts/League_Gothic-webfont.ttf') format('truetype'),
        url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatinModernRoman10Bold';
    src: url('../fonts/lmroman10-bold-webfont.eot#') format('eot'),
        url('../fonts/lmroman10-bold-webfont.woff') format('woff'),
        url('../fonts/lmroman10-bold-webfont.ttf') format('truetype'),
        url('../fonts/lmroman10-bold-webfont.svg#webfonthCDr6KZk') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatinModernRoman10BoldItalic';
    src: url('../fonts/lmroman10-bolditalic-webfont.eot#') format('eot'),
        url('../fonts/lmroman10-bolditalic-webfont.woff') format('woff'),
        url('../fonts/lmroman10-bolditalic-webfont.ttf') format('truetype'),
        url('../fonts/lmroman10-bolditalic-webfont.svg#webfontegrLi3sm') format('svg');
    font-weight: normal;
    font-style: normal;
}

Je suis heureux de savoir qu'il existe une meilleure solution à l'épreuve des balles que le hack smileyface.

J'espère que ça aide quelqu'un!

17
bigsweater

D'après http://caniuse.com/woff , Android 2.3, 4, 4.1, 4.2 et 4.3 ne prennent pas en charge les polices woff. Donc, vous devez également ajouter ttf. Je teste sur Android 4.1 et 4.2 et woff semblait être ok! Mais sur 4.0.3, je devais ajouter des polices tff.

Voir ce lien http://sanchez.org.ph/use-host-and-download-google-fonts-on-your-own-website/ pour savoir comment télécharger des polices ttf à partir de Google.

0
Jeremy