Проблема c @font-face на mac os и linux, как решить?

Question

[Alex J]

Есть макет сайта, там три шрифта, Glasten, DS Eraser Cyr и Arial. После верстки на Windows во всех браузерах их видно,на айфоне тоже, но если заходишь из под mac os или linux(я заходил с ubuntu 14.04), то первые два шрифта отсутствуют. Подключал через @font-face. В чем может быть проблема уважаемые знатоки?

Comments

[Anton Kuzmichev]

Покажите, как вы объявляете @font-face в css

[Anton Kuzmichev]

Помогло?

[Alex J]

Anton Kuzmichev: да, помогло как я описал внизу)

Answer 1

[Anton Kuzmichev]

Даже если у вас нет грубых ошибок в подключении, то могут быть несовместимые с ОС форматы шрифта. Вот так должно работать везде, но вам придётся заиметь ваш шрифт в нескольких различных форматах (сервисы конвертации вам в помощь).

@font-face {
  font-family: 'rouble_regular';
  src: url('../font/rouble-regular.eot');
  src: local('☺'), url('../font/rouble-regular.eot?') format('embedded-opentype'), url('../font/rouble-regular.woff') format('woff'), url('../font/rouble-regular.ttf') format('truetype');
}

Про local('☺') не спрашивайте, это какой-то хак для IE. На знак вопроса в url() тоже обратите внимание и не потеряйте.
Кстати, вот ещё статья про это дело: habrahabr.ru/post/113136

Comments

[Defman21]

Насколько я знаю, хак с local вообще для всех браузеров и используется, чтобы избежать проблем отображения шрифта, если он УЖЕ установлен у юзера локально (и может быть другой версии, например).

Answer 2

[Alex J]

Проблему решил. Конвертил шрифты из битого ttf, нашел точно такой же шрифт svg из него сконвертил тут и все заработало!