Как подключить нестандартный шрифт к сайту

Приветствую читателей блога FairHeart.ru! Оформление текста — важная часть дизайна любого сайта. Многие вебмастера стараются использовать нестандартный шрифт на сайте, чтобы подчеркнуть его индивидуальность и авторский стиль. В этой статье я расскажу вам, как подключить шрифт к сайту.

Не так давно от одного моего постоянного заказчика мне поступила новая работа — сверстать заглушку для сайта (страница, которая показывается посетителям на время, когда на сайте ведутся работы, и он не доступен). Суть работы проста: есть картинка в Photoshop, ее над воссоздать с помощью html и стилей css, сверстать одним словом.

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

Если вы работаете в любом графическом редакторе, то задействовать нестандартный шрифт очень просто. Скачиваете его, загружаете в папку «Шрифты», в которую можно попасть из Панели управления, и дальше он появляется в списке доступных шрифтов. Работаете вы с ним как с любым другим, и проблем никаких не знаете.

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

Подключение шрифта через файл

И так, у вас есть любимый шрифт, который вы используете в графических редакторах и хотели бы задействовать у себя на интернет ресурсе. Представляет он из себя обычный файл чаще всего с разрешением .ttf, но бывают еще форматы EOT, WOFF и SVG. Чтобы подключить его к сайту нужно задействовать правило @font-face в стилях CSS.

 
@font-face {
    font-family: Lobster; /* Название */
    src: url(fonts/lobster.ttf); /* Путь к файлу */
   }
 
p {
    font-family: Lobster, cursive; /* Указываем для данного элемента подключенный нестандартный шрифт */
   }

Здесь нет ничего сложного. В правиле @font-face прописываем всего 2 вещи:

1. Название шрифта, которое впоследствии будем использовать при использовании правила font-family для элементов страницы.
2. путь к файлу со шрифтом, который нужно предварительно загрузить на сервер с помощью ftp клиента.

Далее указываем в правиле font-family для нужного элемента название нашего нестандартного шрифта. В примере это абзац — тег р.

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

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

Как вы уже знаете, Google предлагает огромное количество бесплатных сервисов на все случаи жизни. В нашем случае мы воспользуемся одним из них — Google Fonts. Это онлайн хранилище шрифтов. На данный момент их там уже более 600! Давайте посмотрим, как же им пользоваться.

Шай 1. Переходим на главную страницу Google Fonts. В центральной области мы видим список шрифтов с образцами написания слов, а справа набор фильтров для удобного поиска.

Шаг 2. Выбрав понравившийся шрифт, нажимаем на кнопку «Add to Collection». В коллекцию можно добавить сразу несколько вариантов, но усердствовать слишком не стоит — берите только те, что действительно будете использовать.

Шаг 3. Сама коллекция представлена в нижнем поле страницы. Как только она окончательно сформировалась, нажмите на кнопку «Use».

Далее нам нужно сделать 4 действия.

Шаг 4.1. Далее галочками отмечаем разновидности каждого шрифта, которые хотим использоваться. Опять же, лишнее старайтесь не отмечать, ибо в правом верхнем углу есть информер Page Load, который показывает, на сколько замедлится скорость загрузки страницы после подключения всего этого добра. Разумеется, чем меньше, тем лучше.

Шаг 4.2. Во втором пункте выбираем поддерживаемые символы — латиница (Latin) и кириллица (Cyrillic). Есть еще специфические, но это уже по обстоятельствам.

Шаг 4.3. Подключение коллекции к интернет ресурсу.

Существует 3 способа подключения:

1. На вкладке Standard дается код, который нужно вставить в исходный код страницы между тегами head.
2. На вкладке @import дается код, который нужно вставить в файл со стилями css. Чаще всего это style.css. Вставляете в самое начало.
3. На вкладке Javascript есть код, который надо вставить в самый низ исходного кода страницы перед закрывающим тегом body (можно подключить его как и в первом варианте, в тег head, но скрипты принято размещать в самом низу исходного кода, чтобы не мешали загрузке страницы).

Лично я продпочита вариант №2, ибо он затрагивает только стили CSS.

Шаг 4.3. Теперь уже можно использовать только что подключенный вариант с помощью CSS правила font-family, как показано на приведенной картинке и на моем примере выше.

Вот и все! Пользуйтесь этими двумя способами на здоровье. Оба рабочие и очень простые. На этом же я хочу закончить свою статью. Благодарю за внимание и до скорых встреч! Если возникли вопросы — пишите в комментариях к статье.