Подтвердить что ты не робот

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

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

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

Спасибо!

ИЗМЕНИТЬ

Я использую Google Web Fonts, размещенные в Google, со следующим:

<link href="#" onclick="location.href='http://fonts.googleapis.com/css?family=Leckerli+One'; return false;" rel="stylesheet" type="text/css" />

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

h1
  font-family: "Leckerli One", cursive
4b9b3361

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

Вы можете использовать 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;
}

Ответ 5

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

Ответ 6

Для меня работы добавляются на 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>