Как подключить шрифт для iOS?

Question

[Алексей]

На одном из проектов используется шрифт Futuris Light Cyrillic.
Подключается он следующим образом:

@font-face {
  font-family: "FuturisLightC";
  src: local('☺'),             /* IE trick */
        url('../images/FUTURILC.TTF') format('truetype'), /* Opera, Safari */
        url('../images/FUTURILC.svg#font') format('svg'); /* iOS */
}

Далее по файлу стилей этот шрифт задается например для заголовков:

font-family: "FuturisLightC", Helvetica, Geneva, sans-serif;

В результате во всех современных браузерах по Windows мы видим этот шрифт корректно.
Но вот Safari и Chrome под iOS - отказываются отображать этот шрифт. И следующую за ним Гельветику тоже не отображают. В результате в этих браузерах всё написанное этим шрифтом и его заменой - не отображается вообще никак.

Подскажите пожалуйста, в чем может быть проблема.

Answer 1

[Serj-One]

У вас нет шрифта в нужном этим браузерам формате.
Привожу пример, которым пользуюсь сам.
Пугаться большого количества файлов не нужно, браузер подгружает только один из них - первый, который сможет отобразить.

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

UPD: Для генерации шрифтов в нужных форматах лучше использовать font2web. Он не обладает гибкостью уже указанного fontsquirrel, но работает корректней. Оба сервиса помимо шрифтов генерируют нужный набор css.

Comments

[Ленар Фаттахов]

Не могли бы вы рассказать, почему font2web корректней? Каких проблем он помогает избежать?

[Алексей]

К слову. font2web в моём случае мне помог. Спасибо. Против fontsquirrel ничего не имею.

[Serj-One]

Ленар Фаттахов: Несколько раз наблюдал при работе с fontsquirrel небольшие проблемы с кириллицей в определённых шрифтах. Буквы в сгенерированном шрифте могут слегка отличаться между собой по высоте. Пару раз замечал изменение оригинального межбуквенного интервала. Утверждать, что это шибки именно fontsquirrel не буду, т.к. возможно виновны некачественные шрифты, однако font2web с лёгкостью проглатывал их и выдавал корректный результат.

[Ленар Фаттахов]

domrachew: Большое спасибо, возможно это сэкономит мне немало времени в будущем)

Answer 2

[Ленар Фаттахов]

Используйте fontsquirrel для генерации шрифтов во всех необходимых форматах. Там же показано, как все подключать. www.fontsquirrel.com/tools/webfont-generator