Создание сайтов с нуля - урок 42 - Подключение нестандартных шрифтов

Онлайн-шрифты

Одним из самых популярных и удобных онлайн-сервисов для подключения шрифтов является GoogleFonts. Сервис имеет довольно удобный и простой интерфейс выбора шрифтов и его характеристик. Все шрифты сервиса совершенно бесплатны и не имеют ограничений по использованию. Кроме того, использование Google Fonts может ускорить ваш сайт, так как у многих ваших посетителей в кэше браузера уже будут находиться шрифты с серверов Google, т.к. этот ресурс очень распространён.

Свой шрифт на сервере - встраивание веб-шрифтов

Если на ресурсе GoogleFonts отсутствует необходимый вам шрифт, то его можно поискать на различных специальных сайтах, специализирующихся на «коллекционировании» веб-шрифтов. Один из самых лучших – ресурс FontStorage (раньше - webfont.ru) - сервис, на котором саккумулировано очень много хороших шрифтов, а также есть куча всяких полезностей для работы с веб-шрифтами. Процедура подключения шрифта также очень проста.

Если у Вас уже есть веб-шрифт, который необходимо подключить к проекту, то его необходимо поместить в папку fonts (в нескольких форматах для поддержки всеми браузерами) и подключить при помощи специального правила @font-face.

Важно! Правило @font-face нужно размещать в самом начале таблицы стилей.

Синтаксис правила @font-face следующий:

@font-face {

font-family: 'myFont';

src: local('myFont'),
       url('/fonts/myFont.woff2') format('woff2'),
       url('/fonts/ myFont.woff') format('woff'),
       url('/fonts/ myFont.ttf') format('ttf'),
       url('/fonts/ myFont.eot') format('eot');

  font-style: normal;
  font-weight: 400;

}

В дальнейшем любому элементу страницы можно задавать шрифт myFont следующим образом: селектор {font-family: "myFont ", Arial, sans-serif; }

Этот код говорит браузеру отображать текст внутри элемента <селектор>, используя шрифт myFont. Если браузер по какой-либо причине не сможет загрузить данный шрифт, он выберет следующий из списка альтернатив (в данном случае – Arial, если Arial тоже не будет, то любой из группы sans-serif). Он перебирает их в указанном порядке до тех пор, пока не находит шрифт, который сможет успешно использовать.

Значение local() в свойстве src позволит перед загрузкой шрифта с сервера проверить его наличие на компьютере пользователя, возможно, он уже установлен: src: local("myFont ").

Почему важно указывать формат подключаемого шрифта?

Потому что, если формат указан, перед скачиванием шрифта браузер проверяется, поддерживается ли его формат. Если формат не поддерживается, то браузер не скачивает шрифт и переходит к следующему варианту. А если формат не указан, то браузер скачивает шрифт.

Важно! Если в проекте необходимо использовать несколько стилей (обычный, курсив, жирный и т.д.), то каждый стиль нужно определять отдельно.

В каждом определении шрифта в правиле @font-face дополнительно можно определить: жирность (font-weight), начертание (font-style), ширину символов (font-variant) и регистр строчных букв (font-stretch).

Форматы веб-шрифтов

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

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

• используйте WOFF 2.0 в тех браузерах, которые его поддерживают;
• добавьте WOFF для большинства браузеров;
• применяйте TTF в устаревших браузерах Android (для версий до 4.4);
• добавьте EOT для поддержки устаревших версий IE (до IE9).

Важно! Теоретически, существует ещё один формат контейнера шрифтов - SVG. Однако он никогда не поддерживался в IE и Firefox, и сейчас перестает использоваться в Chrome.

Генераторы шрифтов

Если у вас есть оригинал шрифта, например, в формате «ttf» (размер, как правило, более 500 килобайт) и вы хотите его использовать на сайте, то при помощи специальных генераторов шрифтов из него можно сгенерировать соответствующий веб-шрифт.

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

Единственная проблема FontSquirrel в том, что некоторые шрифты внесены в «чёрный список» по просьбе правообладателей, и вы не сможете получить их веб-версии (например, Segoe UI, Myriad Pro и другие).