font-face оживление

24 Oct, 2009

Последнее время так надоело вставлять свои шрифты на странички, что я решил написать об этом пост. Аккумулированный опыт и последние новости.

Практически, будущее наступило, во всех современных браузерах на данный момент можно вставить нестандартный шрифт на страничку только с помощью CSS. (Firefox 3.5+, Chrome 3.0+, Safari 3.1+, Opera 10+, IE 5+)

Шрифты вообще

Способов за годы веб-разработки придумано множество. И SIFR (шрифты через Flash), которому скоро 5 лет стукнет, и Cufon (шрифты через <canvas>), и всякие другие вариации типа Typeface (там кстати уже можно выделять и копировать!).

Но еще с прошлого тысячелетия самым крутым способом было конечно просто подключить нужный шрифт на страничку, и написать им текст. Сначала это сделали в Netscape, потом в IE 4.0. А теперь это в грядущем CSS3. По спецификации это принято делать так:

  1. @font-face {
  2. font-family: Parampampam;
  3. src: url(parampampam.ttf);
  4. }
И затем использовать это:
  1. p { font-family: Parampampam, serif; }
Именно такой подход на данный момент сработает в Firefox 3.5+, Chrome 3.0+, Safari 3.1+, Opera 10+. То есть практически во всех последних версиях браузеров. Они поддерживают .ttf и .otf файлы.

В IE использование своих шрифтов работает еще с версии 4.0. Но, видимо, споткнувшись еще тогда на лицензировании (или по своим иррациональным причинам), они решили создать свой формат для подключаемых файлов Embedded OpenType (.eot). Который и является средоточием геморроя в этом шрифтовом вопросе.
В любом случае, подключение там работает примерно также:

  1. @font-face {
  2. font-family: Parampampam;
  3. src: url(parampampam.eot);
  4. }
На данном этапе очевидно, если создать этот загадочный .eot файл, то всё будет великолепно, и практически все современные браузеры отобразят наш шрифт.

Как создать EOT

Давно было известно о специальной программе WEFT от Microsoft. Но мне почему-то никак не удавалось ею воспользоваться, шрифты получавшиеся в результате никогда не работали в ИЕ. Я скидывал это на лицензии или какие-то еще заморочки. Но судя по последним постам, почти ни у кого не получалось заставить ее работать. Программа эта вообще довольно уникальна, стоит лишь пробежаться глазами по простому скринкасту для конвертации OTF в EOT.

Но буквально за последний месяц появилось еще два варианта, которые нас и спасут.

Вариант 1: FontForge+ttf2eot

Появился отличный онлайн сервис ttf2eot для конвертации. Но, если в него просто засунуть первый попавшийся TTF файл, получившийся EOT не будет работать в IE. Чтобы он работал, нужно предварительно почистить атрибуты шрифта. Для этого понадобится FontForge.

Если открыть шрифт в FontForge, мы получим примерно такое окошко:

FontForgeFontForge

Затем нам нужно будет открыть окно с «Font Info→TTF Names» и удалить все записи отсюда, красные не удалятся, ну и ладно:

лишние атрибутыЭто окошко находится в меню Element>Font Info

Можно посмотреть как это разжевано в скринкасте.

После чего просто сохраняем шрифт (File→Generate Fonts) и скармливаем его сервису ttf2eot. Результирующий файл будет работать в IE.
В скринкасте кстати, сказано, что надо удалить все атрибуты, и добавить несколько своих. Я просто удалял все, и у меня все работает. Так что можно не заморачиваться.

Вариант 2: fontsquierrel

Однако увидев всю эту мороку из предыдущего варианта, люди ее автоматизировали. Это просто онлайн сервис. Вы загружаете шрифт, он вам генерирует .svg версию шрифта, .eot версию шрифта, и даже WOFF версию (формат для новых Firefox). Вдобавок ко всему, CSS файл с правильным подключением всех этих woff-eot-svg-otf (кошмар какой-то) в @font-face.

Вобщем, на данный момент просто спасительный сервис, пользуйтесь. Его разработчик активно следит за всеми новостями, и сразу же вносит обновления туда, так что на него можно в каком-то смысле ориентироваться.

Как внедрить для всех

На данный момент оптимальным принят следующий код:
  1. @font-face {
  2. font-family: 'Graublau Web';
  3. src: url('GraublauWeb.eot');
  4. src: local('Graublau Web Regular'), local('Graublau Web'),
  5. url('GraublauWeb.otf') format('opentype');
  6. }
Подробнее почему именно так, можно прочитать здесь. local — означает, что браузер должен проверить есть ли в системе такой шрифт, прежде чем скачивать. Должен, но все равно не везде работает. =(

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

А буквально на днях активно продвинулся WOFF, это «сжатый» truetype который пока будет работать только в Firefox 3.6. Просто чтобы веб-разработчикам было нескучно с OTF, TTF, SVG и EOT.

Оптимизация

Во-первых файлы шрифта можно просто gzip'ить. Как показывает опыт, можно ужать в два раза. Что вовсе не так мало, при размере порядка 100 килобайт.

Кроме того, если открыть файл шрифта тем же FontForge, то можно увидеть кучу символов, которые вряд ли будут вами использоваться:

лишние символы в шрифтеВся эта бяка, которая обычно никому не нужна, занимает такое же кол-во байт, как и нужные всем буквы

Прямо в этом же FontForge ненужные символы можно удалить:

удалить лишние буквыВыделить с шифтом и сделать Clear

Благодаря удалению только таких символов, файл для шрифта Myriad у меня уменьшился с 96 килобайт, до 40. Соответственно уменьшается и файл .eot.

Лицензия

Не все шрифты можно использовать в @font-face. Просто потому что его же можно будет легко скачать, а он может стоить денег. И хотя на практике вряд ли кого-то будут доставать по этому поводу, для популярных сайтов лучше не рисковать. Уже есть сайты-сборники шрифтов доступных для @font-face. Такой список есть на Webfonts.info, например, и вот еще один отличный ресурс. (Спасибо Илья!) И время от времени на разных других сайтах.

Кириллических среди них конечно мало, но, пока никто толком не разобрался с этим вопросом, полагаю шрифты можно использовать какие найдете, или просто бесплатные. Вряд ли кого-то засудят за подключение Myriad на свой блог ;)

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

Ссылки

Похоже, скоро мы забудем о SIFR и Cufon! Ура!

43 комментариев к “font-face оживление”

1.Олег | 03 Mar, 2010
Я впервые увидел такое на sochi2014.com был в шоке, что замутили свои фонты, а вот как сделать "загадка". Спасибо!
2.tft | 01 Feb, 2010
Исправьте плз ссылочку - Where to get web fonts, не работает.
3.Николай | 05 Jan, 2010
Полезная инфа, как всегда до меня с опозданием добралась(( Только не понял: почему-то протестил и получается что только в Firefox/3.5.6 у меня не заработал .ttf?
4.shura | 12 Jan, 2010
Where to get web fonts - ссылка не работает
5.Веб-шрифты vs. Шрифты для веба и IE6 | HTML/CSS Evangelist | 06 Dec, 2009
[...] Вадим Макеев – Веб-шрифты vs. Шрифты для веба Юрий Артюх – font-face оживление 2 комментария Читать [...]
6.Александр | 02 Dec, 2009
Спасибо за статью! Если всё заработает (ещё не пробовал) это будет супер!
7.rj | 02 Dec, 2009
подскажите, а 8-ой ие нормально работает если в CSS указать src: url(parampampam.ttf); или ему тоже только eot скармливать?
8.Pofm | 17 Nov, 2009
Не знаю.. я делаю только процентовку к шрифту типа: font size 120%. или font size 80% И текст в итоге становится как с картинки!
9.TTF шрифты на веб-странице &laquo; PHP Portal | 27 Dec, 2009
[...] Юрий Артюх – font-face оживление [...]
10.Lyncis | 09 Nov, 2009
@Макс: Шрифты кешируются. А еще их можно gzip-ить.
11.Мохов Олег | 14 Nov, 2009
Я помню для одного из сайтов вставлял .eot шрифты для ИЕ и наткнулся на такую проблему: для каждого стиля шрифта (наклонный, полужирный, наклонныйполужирный) нужно генерировать свою версию из отдельного файла. Браузер конечно наклонит, но это будет сгенерированный наклонный шрифт, а не задуманный, а верстая вполне можно об этом и забыть. Может есть какое-то решение этой проблемы?
12.akella | 14 Nov, 2009
Олег, я сам не сталкивался, но судя по тому что написано вот тут (в подразделе «WEFT Style Code») возможно стоит просто еще раз продублировать @font-face но добавить туда font-style:italic. Это нужно протестировать конечно, и чтобы в шрифте был италик вариант, тоже думаю обязательно.
13.Макс | 03 Nov, 2009
А как насчёт лишних запросов к серверу? На высоконагруженных проектах это актуально. Интересно, кешируются ли эти подгружаемые шрифты. И, возникла мысль - а нельзя ли как-то через data записать шрифт прямо в CSS?
14.frst | 30 Oct, 2009
Те шрифты, что на fontsquirrel - няшные, а вот то что в примерах с кириллицей - адский ужас, я бы очень не хотел такой кошмар вместо ариала видеть. И думаю понятно, что на благоразумность дизайнеров рассчитывать не стоит. Мне регулярно на верстку попадают макеты из корела где контент забит акцидентными гарнитурами. Так что предлагаю начать уже придумывать всякий софт для обратной замены, плагины для браузеров, которые бы запрещали использование несистемных шрифтов или подменяли их на схожие приличные типа calibri... Кстати есть гденить таблицы похожих шрифтов?
15.progg.ru | 29 Oct, 2009
cssing :: Архив :: font-face оживление... Thank you for submitting this cool story - Trackback from progg.ru...
16.akella | 27 Oct, 2009
Нужно быть готовым к тому что в разных браузерах шрифты могут отображаться по-разному, вот к примеру так
17.Serg | 27 Oct, 2009
@Zigzag Ты б ссылочку дал бы на свою статейку.
18.Zigzag | 28 Oct, 2009
Serg, думаю мне самому было бы не совсем корректно давать ссылку на свой аналогичный материал в чужом блоге. Варианта два, жмете на мой ник, попадаете на мой сайт. Или жмете ссылку номер три с коонца в списке, который размещен под статьей.
19.akella | 28 Oct, 2009
А мне можно, вот ссылка :)
20.Sano | 25 Oct, 2009
У меня в IE Ваш заголовок "cssing:" налазит на слово "архив". Уже второй месяц.:(( Вы ненавидите IE?
21.akella | 26 Oct, 2009
@Zigzag ждем статью! Сделайт трекбек что ли ;) @Sano: прошу прощения за неудобства, но у меня последнее время не windows и могу допускать такие оплошности, не специально, спасибо что сказали, поправил! =) @FTDeBUGgeR: спасибо! поправил!
22.Zigzag | 26 Oct, 2009
Уфф. Добил статью. Давненько я не писал ничего настолько детально проработанного. =)
23.Ghost Bear | 24 Oct, 2009
Начал читать - статья супер-дупер, обязательно вдумчиво изучу. Большое спасибо.
24.Zigzag | 25 Oct, 2009
Балин, три дня пишу развернутую статью на ту же тему, а ты меня опередил. =( Жди завтра мою статью. ;)
25.Илья | 25 Oct, 2009
Аналогично, пришел к выводу что стоит смотреть в сторону @font-face. Тем более появляются довольно неплохие OpenSource и бесплатные шрифты, примеры на http://www.theleagueofmoveabletype.com/
26.0range | 24 Oct, 2009
По уму кроссбраузерность можно расширить, опера с 9 и chrome c 1 версии поддерживают svg шрифты, насколько мне известно. Остаются только firefox 2, 3 - для них можно заюзать cufon Пока что единственное что не понятным остается, будут ли грузиться все версии шрифтов или просто неизвестные будут игнорироваться. И хорошо бы их сжимать поболее, все так 50 килобайт это многовато. И с лицензиями проблемы :((( Тебя же потом и засудят за пиратство :(
27.kikaha | 24 Oct, 2009
Пастернака не читал.. тьфу, сам метод попробовать не успел, но описание выглядит как мечта (ну, немного извращенная, но тем не менее ) - спасибо, буду попробовать!
28.UGgallery &raquo; Архив журнала &raquo; &#8220;Похоже, скоро мы забудем о SIFR и Cufon! Ура!&#8221; | 24 Oct, 2009
[...] перспективы такого нужного и замечательного дела, как встраивание шрифтов в веб-страницы посредством CSS. Много ссылок для [...]
29.FTDeBUGgeR | 24 Oct, 2009
У вас очепятка в адресе ссылки "просто спасительный сервис"
30.Front-end Developer | 24 Oct, 2009
Спасибо, Юра! Очень полезный пост. Действительно, все эти куфоны заколебали уже. Для него и жэКвэри подключать надо. А он там нафыг не нужен... а эксплорер, как всегда в своем репертуаре =)
31.Юрко | 24 Oct, 2009
Все дурня.
32.vd | 20 May, 2010
Как показывает практика, в Opera 10 не всегда отрабатывает нормально (даже пример http://cssing.org.ua/examples/fontface/ нормально виден в ней только в 50% случаев). Помогает выносить ссылку на otf (src) ПЕРЕД local (для IE в этом случае пишем отдельно).
33.WAU | 12 Jun, 2010
не праздный вопрос - а по какому пртоколу подгружается файл шрифта? - http или ftp? потому как при локальном тестировании шрифты видны нормально, а при выкладывании хостеру - шиш. На хостинге сознательно блокирован ftp, что и навело на вопрос.
34.Moor | 21 Jun, 2010
Отлично разобрано, почти помогло. Почти - потому что ФонтСквиррел при конвертации почему-то повырезал из шрифта PF Beau Sans огромное количество символов, в том числе и все кириллические. Кто-нибудь в курсе, как эта проблема решается?
35.Moor | 21 Jun, 2010
akella? черт, точно, не заметил радиокнопку Custom Subsetting. Спасибо.
36.akella | 21 Jun, 2010
Там при конвертации можно в чекбоксах указывать какие символы ты хочешь оставить, кириллица по умолчанию могла быть не выбрана потому и вырезало.
37.Sulpher | 12 Sep, 2010
Замечательная статья! Спасибо большое автору! Однако вопрос. На входе имеем такую конструкцию: @font-face { font-family: 'Titillium Maps'; src: url("../fonts/TitilliumMaps29L002.eot") } @font-face { font-family: 'Titillium Maps'; src: url("../fonts/TitilliumMaps29L002.otf") format("opentype"), url("../fonts/TitilliumMaps29L002.woff") format("woff") } Будут грузиться все три шрифта, но отображаться только один (в зависимости от настроек)? Все таки важно: или браузер подгрузит три шрифта на 150 кб или один на 50 кб. Приведенная выше конструкция в целом актуальна?
38.Алексей | 14 Sep, 2010
Автор проделал отличную работу, написав эту статью. з.ы. кстати, работает. :))
39.cssing :: Архив :: IE9 и Web Standards Days в ? иеве | 20 Sep, 2010
[...] WOFF [...]
40.@font-face | no more coffee | 02 Dec, 2011
[...] в rss-ленте пост на cssing.org.ua про @font-face и решил попробовать использовать технику в [...]
41.opera | 07 May, 2012
В опере 11.51 глюк, так и не смогу заставить работать шрифты. Поставил ещё 11.62 там все заработало сразу.
42.@font-face с кастомным китайским шрифтом - Lunart | 28 Jan, 2014
[...] Интересный пост про шрифты в целом и немного про FontForge [...]
43.font-face | Knowledge Base | 28 Jan, 2014
[...] font-face оживление [...]