@font-face не работает в мобильном Webkit

У меня возникли проблемы с тем, чтобы @font-face вести себя в любом просматриваемом браузере Webkit, который я тестировал, - Safari на iPhone 3GS, браузере Android 2.2 по умолчанию и браузере Dolphin на Android.

Он работает во всех настольных браузерах: от IE7 до IE9, FF3.5, Safari 4 и Opera.

Шрифты и CSS из 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;
}

Я проверил SVG ID в источнике шрифта SVG, и все они совпадают.

Может быть, потому, что в CSS уже есть некоторые правила межстрочного интервала?

Спасибо!

Ответы

Ответ 1

Как оказалось, синтаксис был неправильным. Я наткнулся на это решение через твиттер:

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

Это сработало отлично. Просто проверены во всех основных браузерах, и появляются мои шрифты, в том числе на Android и iOS.

Теперь мой CSS читается так:

@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;
}

Приятно знать, что там лучше пуленепробиваемое решение, чем взломать смайлик dang.

Надеюсь, это поможет кому-то!

Ответ 2

Согласно http://caniuse.com/woff, Android 2.3, 4, 4.1, 4.2 и 4.3 не поддерживают woff-шрифты. Поэтому вы должны добавить ttf. Я тестирую Android 4.1 и 4.2, и woff, похоже, в порядке! Но в 4.0.3 мне пришлось добавить tff шрифты.

Смотрите эту ссылку http://sanchez.org.ph/use-host-and-download-google-fonts-on-your-own-website/, чтобы узнать, как загрузить шрифты ttf из Google.