Google Font не работает в Safari

Я работаю над тем, чтобы мой сайт выглядел одинаково в Safari и Chrome. В Chrome это выглядит так, как я хочу. Основная проблема заключается в том, что Google Font, похоже, не загружается в Safari. Поскольку я использую точный код, указанный на сайте Google Font, я не понимаю, почему Safari не будет его получать. Это просто несовместимо с Safari, и мне приходится полагаться на резервный шрифт?

Сайт можно найти здесь

Ответ 1

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

Nunito TTF ver

Ответ 2

Ваш CSS должен содержать не только

font-family: 'Source Sans Pro', sans-serif;

он также должен иметь значения для FONT-STYLE и FONT-WEIGHT:

font-family: 'Source Sans Pro', sans-serif; font-weight:900; font-style:italic;

если вы используете шрифт, который содержит такие значения, как например: https://fonts.googleapis.com/css?family=Source+Sans+Pro:900italic

Ответ 3

В моем случае я использовал имя шрифта без кавычек. Так что просто измените

body{
    font-family: roboto, Arial, sans-serif;
}

к

body{
    font-family: 'roboto', Arial, sans-serif;
}

Chrome работает отлично без кавычек, но Safari этого не делает.

Ответ 4

Если вы используете код @import в css, как этот

введите описание изображения здесь

удалите его и используйте ссылку в теге head

введите описание изображения здесь

Ответ 5

У меня был случай, когда Google Webfont (Londrina) не отображался в Safari (для Windows), потому что я использовал text-rendering: optimizeLegibility;. После удаления это было хорошо.

Пример: http://codepen.io/julia-r/pen/gagbdy

Ответ 6

Даже если это старый вопрос, я думал, что добавлю свое решение (которое я нашел в другом месте), чтобы помочь другим.

Когда вы объявляете свои шрифты в своем CSS, добавьте "! important" в конце. Это очистило мою проблему.

body { font: {  
    family: $arvo, sans-serif !important;
    size: 18px;
}