Задать вопрос
AlexFreem
@AlexFreem
addicted
css

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

На одном из проектов используется шрифт 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 - отказываются отображать этот шрифт. И следующую за ним Гельветику тоже не отображают. В результате в этих браузерах всё написанное этим шрифтом и его заменой - не отображается вообще никак.

Подскажите пожалуйста, в чем может быть проблема.
  • Вопрос задан
  • 8286 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
Serj-One
@Serj-One
i'm sexy and i know it
У вас нет шрифта в нужном этим браузерам формате.
Привожу пример, которым пользуюсь сам.
Пугаться большого количества файлов не нужно, браузер подгружает только один из них - первый, который сможет отобразить.
@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.
Ответ написан
4 комментария
4 комментария
Пригласить эксперта
Ответы на вопрос 1
fr_end
@fr_end
Frontend разработчик
Используйте fontsquirrel для генерации шрифтов во всех необходимых форматах. Там же показано, как все подключать. www.fontsquirrel.com/tools/webfont-generator
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
React разработчик
Uptrade
от 150 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Исправление багов в вебвью
26 апр. 2024, в 11:47
15000 руб./за проект
Требуется подсказать как скомпилировать приложение на C++ Qt
26 апр. 2024, в 11:30
1000 руб./за проект
Настроить ИИ модель IPadapter
26 апр. 2024, в 11:17
2000 руб./за проект
Ещё заказы