S6 Studio

Доверяй, но проверяй

Howto  CSS  • Евгений Задорин • 25 апреля 2013 • Без комментариев

В интернете полно статей, в которых обсуждаются проблемы с использованием нестандартных шрифтов и css-директивы @font-face.

Повторяться не вижу смысла, все мануалы уже давным давно написаны, задачи решены.

Однако добавлю. Если вы перепробовали все, но чертов шрифт так и не подключился, проблема может быть в человеческом факторе.

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

Хороший способ проверить корректность файла шрифта — прогнать его через конвертер. Например, fontsquirrel.com при загрузке некорректного файла шрифта выдал мне сообщение The font 'fontname.ttf' is corrupt and cannot be converted.

В данной ситуации мне помог другой онлайн-конвертер. Прогнав через него проблемный файл, на выходе я получил рабочий *.ttf, который без проблем был схаван fontsquirrel.com.

Резюмируя сказанное, если шаманство с бубном вокруг @font-face не помогло — убедитесь в корректном файле шрифта. Ну и приведу проверенную схему написания css:

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

<< К блогу Добавить комментарий