letehaha
@letehaha
Вникаю вo front-end

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

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

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

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

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

8c829c2e8079426ba2e3afc8edb9ee9f.png

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

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

3fa64ea9821f4923b8d5cb3a25922cdd.pngUPD 2: проблема конкретно в этом шрифте, т.к. я пробовал подключить другие шрифты, и они отображались нормально.
  • Вопрос задан
  • 1005 просмотров
Решения вопроса 1
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
А я думаю, проблема в генерации шрифта.
Используя Шрифтовую белку сделайте шрифт и добавьте кроссбраузерным кодом.

@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;
}


61ee616103944b058004f42e22edb0b6.png
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
dom1n1k
@dom1n1k
Скорее всего, что-то с путями - браузер не находит шрифтовые файлы.
Ответ написан
DirecTwiX
@DirecTwiX
"display: flex;" уже предлагали?
Шрифт, используемый во время рендера, можно посмотреть на закладке Computed.
XJuLIHA.png
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы