Почему шрифт отображается иначе?

Question

[Дмитрий]

В общем, есть у меня пара шрифтов в макете. Скачал, установил, подключил - не отображается.

Вот так я их подключил в css:

Вот так отображается шрифт Playfair: (специально использую расширение, что бы оно показало какой шрифт используется на странице)

Вот так он должен отображаться:



В чем проблема и как её решить?

UPD: К ответу о путях:

UPD 2: проблема конкретно в этом шрифте, т.к. я пробовал подключить другие шрифты, и они отображались нормально.

Answer 1

[Сергей Горячев]

А я думаю, проблема в генерации шрифта.
Используя Шрифтовую белку сделайте шрифт и добавьте кроссбраузерным кодом.

@font-face {
    font-family: 'arial_narrow';
    src: url('../font/arial_narrow_regular.eot');
    src: url('../font/arial_narrow_regular.eot?#iefix') format('embedded-opentype'),
         url('../font/arial_narrow_regular.woff2') format('woff2'),
         url('../font/arial_narrow_regular.woff') format('woff'),
         url('../font/arial_narrow_regular.ttf') format('truetype'),
         url('../font/arial_narrow_regular.svg#arial_narrow_regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Comments

[Дмитрий]

Как раз её я и использовал для генерации :) Попробую конечно добавить побольше форматов, но насколько я знаю, woff и woff2 достаточно для всех браузеров (всегда так было, по крайне мере).

[Дмитрий]

Увы, не помогло.

[Сергей Горячев]

Дмитрий: А латинские символы также не показывает?

[Дмитрий]

Sergey Goryachev, а латинские отображает как нужно. Видимо "белка" обрезала мне кириллицу. Сейчас проверю.

[Сергей Горячев]

Дмитрий: С дефолтными настройками она всегда режется. Добавить в ответ, что нужно отметить.

[Сергей Горячев]

Дмитрий: Опечатка. *добавил

[Дмитрий]

Sergey Goryachev, спасибо)

Answer 2

[dom1n1k]

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

Comments

[Златослав Десятников]

Этого не может быть. Иначе были бы ошибки в консоли.

[Дмитрий]

С путями всё хорошо. В HTML подключаю fonts/fonts.css, что соответствует путям в проекте.

[Златослав Десятников]

Дмитрий, попробуйте поменять краткий синтаксис `font` на развёрнутый, то есть, написать font-face: ... .

[Дмитрий]

Златослав Десятников:, пробовал – не помогло.

[dom1n1k]

А то, что fonts.css подключено после main.css - нормально?

[Дмитрий]

dom1n1k, я бы сказал что не очень, и это так, но это все равно не помогло :)

Answer 3

[DTX]

Шрифт, используемый во время рендера, можно посмотреть на закладке Computed.

Comments

[Дмитрий]

У меня этой закладки почему-то нету

[DTX]

Дмитрий: версия хрома?

[Дмитрий]

DTX, Яндекс.Браузер, всё понятно :D