Как подключать свои шрифты на сайт, или все о @font-face в CSS

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

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

Для начала поговорим о форматах файлов шрифтов для браузеров, их всего несколько: TTF, EOT, WOFF, SVG. Каждый из них подходит к нескольким браузерам, но как выяснилось нет ни одного уникального на данный момент, как как выглядит поддержка того или иного формата в браузерах:

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

Пример подключения шрифта выглядит следующим образом:

@font-face {
    font-family: 'BuxtonSketch'; 
    src: url('/BuxtonSketch.eot');
    src: local('BuxtonSketch'), url('/BuxtonSketch.ttf') format('truetype');
}

Давайте теперь разберемся с тем, что и как тут работает:

font-family: 'BuxtonSketch';

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

src: url('/BuxtonSketch.eot');

Эта строчка специально выделяет путь до файла шрифтов формата ".EOT".

src: local('BuxtonSketch'), url('/BuxtonSketch.ttf') format('truetype');

В этой строчке мы прописываем вначале "local(BuxtonSketch)" этим мы проверяем наличие шрифта у посетителя сайта, если его нету, то мы дополнительно подгружаем его, для этого дальше мы прописываем путь до файла шрифтов и далее указываем что за формат у этого файла.

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

Вот как будет выглядить полноценный пример подключения стороннего шрифта и последующее использование его для всех тегов <p></p>:

@font-face {
    font-family: 'BuxtonSketch';
    src: url('/fonts/BuxtonSketch.eot');
    src: local('BuxtonSketch'), url('fonts/BuxtonSketch.woff') format('woff'), url('fonts/BuxtonSketch.ttf') format('truetype'), url('fonts/BuxtonSketch.svg') format('svg');
}

p {font-family:'BuxtonSketch';}

Учитывая, что все файлы шрифтов лежат в папке "fonts".

Если у вас есть только файл одного формата, всегда в интернете можно найти сайты, которые конвертируют из любого в другие.

Так же хочу посоветовать вам сайт http://www.font2web.com/, хоть он и на английском все довольно понятно, вы выбираете файл шрифтов формата .ttf или .otf, нажимаете на кнопку "Convert & Download", после чего начнется загрузка всех откорвентированных форматов с примером их использования.

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