Красивый шрифт на сайте

Не хочу сказать, что мне надоели стандартные шрифты. Просто Arial, Verdana, Times New Roman настолько приелись глазам за пару десятков лет, что хочется чего-то свеженького — по крайней мере браузеры стали это позволять 🙂 Конечно, кое-где с этим делом перебарщивают. Но, если всё это грамотно и со вкусом сочетать, это здорово освежит сайт.

Содержание




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

  • Любая версия Internet Explorer понимает шрифт типа — EOT;
  • Firefox начиная с версии 3.5 понимает – TTF и OTF, а с версии 3.6 научился понимать WOFF;
  • Opera, начиная с 10 версии, работает с — TTF и OTF шрифтами;
  • Все версии GoogleChrome понимают SVG шрифты, но в 2010 научился читать всеми любимые TTF и OTF;
  • В Safari, начиная с версии 3.2, работает с TTF и OTF шрифтами.

Google Web Fonts

Самый простой способ воспользоваться сервисом Google Web Fonts. Как всем известно, гуглы плохого не делают 🙂 , достаточно выбрать нужные шрифты и встроить в сайт аж тремя способами:

  1. Через элемент ‹link›. Строка будет иметь примерно следующий вид.
  2. Через правило @import. Такую строку вставляем в свой CSS-файл в самом верху.
  3. Через JavaScript.

Просто и со вкусом. Все шрифты для разных версий браузеров определяются и встраиваются автоматически.

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

Font Converter

Это второй, чуть более сложный способ встраивания шрифтов.

Выше мы уже выяснили, что но нам нужно иметь шрифт во всех форматах TTF OTF WOFF SVG и EOT, чтобы он корректно отображался во всех браузерах. Если шрифт во все форматах есть, то все хорошо, если нет, то тоже все хорошо 🙂 . Идем на сайт и конвертируем в недостающие форматы:

Рассмотрим работу с Webfont Generator подробнее:

  1. Добавляем свой шрифт или шрифты и выбираем режим Expert. Можем выбрать форматы шрифтов — рекомендую оставить всё, как есть — это работает, по крайней мере, на всех современных версиях браузеров.Выбираем режим Expert
  2. Выбираем Custom Subsetting. Это нужно для того, чтобы выбрать именно те диапазоны символов, которые нам нужны. А нужны нам, скорее всего, English и Cyrillic. Также я добавляю то, что на скриншоте — в действительности никогда не знаешь, какие ещё символы смогут понадобиться, а повторять эту процедуру по второму разу (вместе с интеграцией) не особенно хочется.Выбираем English и Cyrillic
  3. Мы можем встроить свои шрифты прямо в CSS при помощи Base64 Encode (все современные браузеры поддерживают этот финт ушами). Это позитивным образом скажется на снижении нагрузки на сервер (уменьшится количество обращений к нему), а также на скорости загрузки страниц.

    Также можно изменить имя получаемой CSS и добавить ещё всяких опций, раздувающих размер файла и на практике не особо нужных. Остальное не трогаем — оно того не стоит.

    Лжём о том, что этот шрифт невозбранно разрешается использовать в интернете и получаем zip-файлик.Получаем zip-файлик

  4. Открываем архив. В нём мы увидим файл «имяшрифта-demo.html» — открываем и видим красивую табличку со своими шрифтами. Для проверки нашей кириллицы переходим на Glyphs & Languages, листаем ближе к концу страницы.
  5. И последним шагом интегрируем шрифт в CSS сайта, например:
Лично я в 90% случаев использую Font Squirrel @font-face Generator, но, если вы задаётесь вопросом «как встроить Open Sans на свою страницу» (как на этом сайте 🙂 ) — не парьтесь и используйте Google WebFonts.

Оставить комментарий