Нестандартные шрифты на сайте с помощью CSS

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

Итак, начнем, конечно, со спецификации CSS. Она сама здесь. Нам нужно только «Font Descriptions and @font-face»:

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

Т.е. в нашем случае надо подгрузить нестандартный шрифт и подружить с ним браузер. Описание шрифта могут быть классифицировано в три типа:

  1. Те, которые обеспечивают связь между использованием CSS шрифта и описанием шрифта (у них есть те же самые названия, как соответствующие свойства шрифта CSS).
  2. Ссылки на местоположение данного шрифта.
  3. те, которые далее характеризуют шрифт, чтобы обеспечить связь между описанием шрифта и данными шрифта.

Все описания шрифта определены через @font-face в правиле. Общая форма:

@font-face {
    <описание шрифта>
}

Разберем пример из спецификации.

<!doctype html public "-//w3c//dtd html 4.0//en">
<html>
    <head>
    <title>Font test</title>
    <style type="text/css" media="screen, print">
    @font-face {
        font-family: "Robson Celtic";
        src: url("/fonts/rob-celt")
    }
    h1 {
        font-family: "Robson Celtic", serif 
    }
    </style>
    </head>
<body>
    <h1> This heading is displayed using Robson Celtic</h1>
</body>
</html> 

Тут все просто.

  • font-family: "Robson Celtic" — полное название шрифта. Его можно узнать с помощью программ по работе со шрифтами. И браузер конечно надо научить его искать. Для этого прописываем название шрифта в данной спецификации.
  • src: url("/fonts/rob-celt") — путь к шрифту относительно CSS стиля. Не абсолютный.

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

@font-face {
    font-family : "Robson Celtic";
    src         : url("rob-celt.eot");
    src         : url("rob-celt.eot?#iefix") format("embedded-opentype"),
                  url("rob-celt.woff") format("woff"),
                  url("rob-celt.ttf") format("truetype"),
                  url("rob-celt.svg#JournalRegular") format("svg");
    font-weight : normal;
    font-style  : normal;
}

Использование Google Fonts

Есть еще интересное решение, которое предстовляет компания Google — Google Font Api. Тут все проще, позволяет снизить нагрузку на сервер, грузя шрифты с серверов Google. Выбираете нужный шрифт, конечно если он бесплатен и есть на сервере. Чаще всего в проектах испольузем шрифты серии PT Sans. Выбираем шрифт, нажимаем кнопку Quick use и получаем следующий код.

<link href='//fonts.googleapis.com/css?family=PT+Sans&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

Но есть и другие варианты подключения нестандартных шрифтов на сайте, например через @import:

@import url(http://fonts.googleapis.com/css?family=PT+Sans&subset=latin,cyrillic);

И вариант ассинхроннной загрузки через javascript:

<script type="text/javascript">
    WebFontConfig = {
        google:{ families: [ 'PT+Sans::latin,cyrillic' ] }
    };
    (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
                 '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
    })(); 
</script>

Еще пару лет назад это было проблемой, но теперь ее нет.

Конвертация не стандартных шрифтов

Не расказал про инструмент конвертации TTF шрифтов во все необходимые форматы, для кроссбраузерного решения. Решение для конвертации предлагает сайт www.fontsquirrel.com. В простонародье белка.

Font Squirrel

P.S. Не забывайте, уважаемые друзья, что у шрифтов есть авторы, и порою лицензии на шрифты имеют коммерческий характер. Убедитесь перед использованием, что шрифт бесплатен или приобретена лицензия на его использование. А то будет у вас, как в студии Лебедева — Незаконное использование шрифта.

Начать проект вместе с нами
Заполните форму и отправьте
нам сообщение!
Если у Вас возникли вопросы, предложения, либо Вы желаете оформить заявку на заказ услуги — Добро пожаловать!
Телефоны и мессенджеры:
Москва: +7 (499) 389-42-40
Санкт-Петербург: +7 (812) 456-72-40