С чем может быть связана странная проблема с подключением шрифта?

Question

[gassmonkey]

Нужна помощь, друзья.
Битый час мучаюсь с подключением шрифта Proxima Nova. Почему-то отображается только в IE.
Конвертирую белкой, кириллица не обрезана.

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

Кто подскажет, в чём проблема?

Answer 1

[gassmonkey]

Виновник найден - это обновлённый конфиг csscomb'а, который менял местами 2 src, и в итоге последним был всегда

src: url('../fonts/proxima_nova_bold_italic-webfont.eot');

Answer 2

[qo_0p]

Я тут писал подробную инструкцию:
Как подключить нестандартные шрифты, чтобы они отрисовывались в canvas?

Попробуй так:

@font-face {
  font-family: "ProximaNova"; // двойные кавычки!!!
  src: url('../fonts/proxima_nova_light-webfont.eot');
  src: url('../fonts/proxima_nova_light-webfont.eot?#iefix') format('embedded-opentype'),
  url('../fonts/proxima_nova_light-webfont.woff2') format('woff2'),
  url('../fonts/proxima_nova_light-webfont.woff') format('woff'),
  url('../fonts/proxima_nova_light-webfont.ttf') format('truetype'),
  url('../fonts/proxima_nova_light-webfont.svg#proxima_nova_ltlight') format('svg');
  font-weight: 300;
  font-style: normal;
}

далее когда будешь назначать шрифт элементам пишешь без кавычек:

#d1 {
    font: 300 18px ProximaNova;  // без кавычек
}

Comments

[gassmonkey]

Спасибо, но канвас для шрифта - дикое извращение.

[qo_0p]

gassmonkey: о чем ты?

[qo_0p]

gassmonkey: Не надо пороть чушь не разобравшись. Там написано о шрифте для канваса, а не наоборот.

[gassmonkey]

qo_0p: Так или иначе, дело явно не кавычках.

[qo_0p]

gassmonkey: Так или иначе, видимо дело НЕ ТОЛЬКО в кавычках, но и в чем то еще. Например, откуда нам знать где у вас стили лежат относительно индекса.

[gassmonkey]

qo_0p: Не болтайте глупости, мне не 15, чтоб перепутать пути.

[qo_0p]

gassmonkey: Почему именно не 15? Вам 16? И при чем тут возраст вообще? Кто-то и в 11 с путями разберется, а кто-то и в 30 не сможет. О ваших возможностях я могу судить лишь по паре комментариев тут. И то только о спеси.

[gassmonkey]

qo_0p: В вопросе указано - "отображается только в IE". Это как бы намекает, что проблема априори не в путях и кавычках, и глупые ответы школьных экспертов меня не интересуют.

[qo_0p]

gassmonkey: Какой вопрос, такой ответ. Откуда нам было знать что ты используешь (csscomb) и еще что, и с каким конфигом. Через ясновидение? По поводу "отображается только в IE" - это не показатель правильных путей и кавычек, так как если шрифты установлены на локальной машине, то где-то они могут отображаться, а где-то нет. Так что не надо с больной головы на здоровую валить.

[gassmonkey]

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