Шрифтомания от fontsquirrel. Рядовая логика работы со шрифтами при верстке сайта из песочницы

Небольшой рассказ о том, как корректно генерировать font для рунета. В центре внимания известный уже на Хабре буржуйский сервис fontsquirrel.

Если красота должна спасти мир, то дизайнеры web интерфейсов — это армия зла. Ни поймите меня не верно, сам считаю себе web дизайнером, и не могу перенести криворуких верстальщиков, приходится верстать свои же psd-изыскания, такими же кривыми руками. И тут начинается самое интересно…

Как все на практике:

1. Первым делом все упирается в выбор нужного шрифтового стека для рунета, и если бы не это, то пришлось держать в уме. Выбрав нужный стек скармливаем его body, примерно так:

body{
font-family: "Arial Black", "Helvetica CY", "Nimbus Sans L" sans-serif;
font-size:12px;
}

На выходе получаем базовый шрифт, приближенный к тому, что мы используем в нашем дизайн макете. Отлично!

2. Довольные своей оперативностью внимательно смотрим дизайн-макет работы и местами (то ли в меню, то ли в футере) видим популярный, практически у всех полиграфистов: Myriad Pro, Arial Narrow или еще какой-нибудь Europe из StarCraft. Сразу в голову приходят три варианта: заменить картинками, поставить JS (ага, тот самый который cufon) ну или в очередной раз прикоснуться к CSS свойству @font-face. Да, мысль отказаться от исчадия вселенского масштаба и использовать безопасный стек повсеместно у нас конечно же не возникает — мы, что называется, «воплощаем» красоту в жизнь.

Первый вариант, пришедший на ум — заменить все на png — мы откидываем сразу, так делали наши прадеды еще на заре палеолита;
Второй вариант (cufon.js) не устраивает нашего заказчика, дай Бог ему здоровья — нашелся на земле один трезвомыслящий клиент; — поэтому переходим к пункту три.

3. Выискиваем из недр Windows 7 нужный нам шрифт по такому следу: «Пуск → Панель управления → Шрифты», копируем в локальную папку на компе с проектом и открываем font генератор fontsquirrel. В моем случае — MyriadProCondensed.

На удачу кликаем по кнопкам и получаем готовое css свойство из серии:

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

Также получаем в архиве для скачки пример того, как будет выглядеть наш шрифт в браузерах. И все бы ничего, но полученный результат не работает так, как нам надо. И вроде же поставили EXPERT… в настройках, и даже по выбирали какие-то галочки — но все равно эффекта нет — русские буквы не хотят становится MyriadProCondensed.

Я гуглил два дня, первым делом открыл Хабр, откуда собственно и узнал о сервисе, спасибо Terion, ничего не нашел по этому вопросу и продолжил «гуглить» настроение. Спустя два дня настроение появилось и начал разбирать сервис www.fontsquirrel.com/ по полочкам, а именно искать там локализацию кириллицы.

4. Нашел! Всего то надо было поставить «радиобатон» в Subsetting на позицию Custom Subsetting. В выпавшем содержание сета установить галочку Language на позиции Cyrillic.



5. Ура заработало. Идем пить кофеёк. Все спасибо за терпение.

P.S. Переубеждать вас делать верстку/интерфейс безопасными стеками, даже не буду. Пусть это будет на нашей совести, но знаю одно, пока эта шрифтомания существует — мир медленно, но уверено катится в пропасть. Ничего красивого в том, что шрифт с экрана монитора невозможно прочитать — нет!