Веб-шрифты Google не загружаются в Chrome для iOS

когда я использую Google Webfonts, они отлично загружаются в каждом браузере, о котором я забочусь, кроме Chrome/iOS. Это кажется странным, так как он отлично работает на Chrome для Mac и Safari для iOS, поэтому я не думаю, что это проблема iOS или проблема Google Chrome. Кажется, это специфично для Chrome / iOS.

любые идеи или идеи о том, как устранить это, было бы здорово!

спасибо!

редактировать

Я использую веб-шрифты Google, размещенные в Google, с следующий:

<link href="http://fonts.googleapis.com/css?family=Leckerli+One" rel="stylesheet" type="text/css" />

в моем шрифте (SASS) я использую следующее:

h1
  font-family: "Leckerli One", cursive
11
css google-chrome google-webfonts ios responsive-design

7 ответов

Я вижу ту же проблему. Размещение файлов шрифтов на моем собственном сервере и переписывание правил @font-face для соответствия решило проблему для меня, как с моим локальным сервером dev, так и в prod.

Я не знаю причины; мое лучшее предположение было бы какой-то проблемой того же происхождения, которая применяется по-разному в UIWebViews (iOS Chrome является UIWebView из-за правил App Store).

9

устройства IOS используют только форматы TTF (или OTF, если они следуют рекомендациям разработчика ниже). Этот шрифт используется как WOFF, EOT и OTF (предположительно, не следуя рекомендациям) . Есть некоторые услуги это даст вам другие версии. Попробуйте указать шрифт с помощью @font-face и посмотреть, если что устраняет проблему! Fontsquirrel имеет @font-face generator сделать тяжелый подниматься.

в отношении последующего вопроса. Есть некоторые документация разработчика от Apple об их реализации шрифтов TrueType. Его можно найти здесь. По сути, форматы TTF хранят шрифт как ресурсы sfnt. Единственный другой формат шрифта,который может это сделать, - это оболочка таблицы смещения sfnt OpenType. Поскольку IOS читает шрифты с помощью оболочек sfnt, вы столкнетесь с проблемами со шрифтами, которые не хранятся таким образом. (Извините за все jargonny говорить).

4

можно использовать Google Fonts API Loader который обнаружит браузер пользователя и отправит обратно соответствующим образом отформатированный CSS.

пример кода доступен в первом ответе на этот вопрос переполнения стека.

Это позволит как Safari и Chrome (и другие UIWebView-браузеры) для правильного отображения шрифта.

Примечание: если вы хотите сохранить шрифты локально, как @Dave предложил это CSS должны работать.

4

на в CSS вы можете использовать

!important

пример:

@font-face {
  font-family: 'Monda' !important;
  font-style: normal !important;
  font-weight: 400 !important;
  src: local('Monda Regular'), local('Monda-Regular'), url(http://themes.googleusercontent.com/static/fonts/monda/v1/sk05J8GA1NvUxDnk43EgAQ.woff) format('woff') !important;
}
2

в случае, если кто - то еще видит эту проблему - шрифт не загружается в Chrome на iOS 9 или старше-дважды проверьте, что шрифт импортируется как файл css, а не как файл js. Fonts.com даст вам возможность импортировать шрифты как js, которые не будут подобраны на Chrome / iOS 9 или ниже. Изменение моего импорта в css исправило это для меня.

0

для меня работает добавить в php страницу:

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Trocchi');
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
</style>
0

в последнее время у меня аналогичная проблема с UIWebView. Я внес дополнительные изменения в приложение iOS и веб-источник, ничего не помогло.

наконец-то исправлено, просто изменив ссылку Google Font на https.

0