У всех не работает шрифт Noto Serif Italic в Safari?

Question

[Виолетта Морозова]

Использую на проекте шрифт Noto Serif Italic. Во всех браузерах работает, в сафари - нет. Пробовала и файл, полученный от дизайнера, и скаченный с белки, и подключенный с гуглфонтс. Ноль эффекта. Другой какой-то шрифт попробовала - в сафари работает.

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

Answer 1

[Виолетта Морозова]

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

@font-face {
  font-family: 'Noto Serif';
  src: url('<%= font_path "noto/NotoSerif-Italic.eot" %>');
  src: url('<%= font_path "noto/NotoSerif-Italic.eot" %>?#iefix') format('embedded- 
  opentype'),
  url('<%= font_path "noto/NotoSerif-Italic.woff2" %>') format('woff2'),
  url('<%= font_path "noto/NotoSerif-Italic.woff" %>') format('woff'),
  url('<%= font_path "noto/NotoSerif-Italic.ttf" %>') format('truetype'),
  url('<%= font_path "noto/NotoSerif-Italic.svg" %>') format('svg');
  font-weight: normal;
  font-style: italic;
}

div {
  font-family: 'Noto Serif';
  font-style: italic;
}

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

Answer 2

[Максим Тимофеев]

А в каком формате шрифт? Как подключаете?
Сафари кушает .ttf, WOFF и svg начиная с 10 версии
С конвертировать можно тут:
https://www.fontsquirrel.com/tools/webfont-generator

Comments

[Виолетта Морозова]

шрифт подключается в форматах eot, ttf, woff, woof2, svg

@font-face {
font-family: 'Noto Serif';
src: url('<%= font_path "noto/NotoSerif-Italic.eot" %>');
src: url('<%= font_path "noto/NotoSerif-Italic.eot" %>?#iefix') format('embedded-opentype'),
url('<%= font_path "noto/NotoSerif-Italic.woff2" %>') format('woff2'),
url('<%= font_path "noto/NotoSerif-Italic.woff" %>') format('woff'),
url('<%= font_path "noto/NotoSerif-Italic.ttf" %>') format('truetype'),
url('<%= font_path "noto/NotoSerif-Italic.svg" %>') format('svg');
font-weight: normal;
font-style: italic;
}

"Пробовала и файл, полученный от дизайнера, и скаченный с белки, и подключенный с гуглфонтс."

[Виолетта Морозова]

"Подключаю все правильно, так же как и другие шрифты, которые работают."

[Максим Тимофеев]

Виолетта Морозова: Очень похоже на кеш, так как очень странное поведение, ну и консоль надо глянуть

[Виолетта Морозова]

можно посмотреть тут noabox.webarte.ru
этим курсивным шрифтом должны быть слоганы: "Мы создали удобный и недорогой способ познания мира селективной парфюмерии" и "Мы делаем мир парфюмерии понятным, привлекательным и доступным!"
везде норм, а именно в сафари не норм

[Максим Тимофеев]

Виолетта Морозова: нет сафари под рукой, не могу проверить