Применение нестандартного шрифта на сайте

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

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

Применение нестандартного шрифта на сайте

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

Итак, смотрим название шрифта (в нашем случае шрифт PetersburgC Italic):

Применение нестандартного шрифта на сайте

Ищем шрифт на компе, у меня путь к папке со шрифтами следующий C:\Windows\Fonts\ в поисковой строке набираю название шрифта.

Применение нестандартного шрифта на сайте

Этот шрифт для удобства копирую на рабочий стол. Далее открываем онлайн сервис генерации веб шрифтов – web-font-generator.com

Применение нестандартного шрифта на сайте

1 – понятно выбираем найденный шрифт.

2 – ставим галочку на пункте “I’m uploading a font that is legal for web embedding. I checked with the author and/or EULA.”, т.е. соглашаетесь с тем, что шрифт не ворованный бла бла бла.

3 – генерируете сам шрифт. Должно получиться как показано ниже.

Применение нестандартного шрифта на сайте

Жмите “Download Package” и в архиве видим следующее:

Применение нестандартного шрифта на сайте

Далее кульминация. Наш шрифт успешно сгенерировался, теперь нужно его подключить к нашей верстке. Я делаю так, есть папка CSS, в ней создаю папку FONTS (специально для всех нестандартных шрифтов). В папку FONTS заливаю все скачанные файлы, кроме preview.html (это понятно обычное превью шрифта).

В файле CSS/style.css (в основном файле стилей для шаблона, у вас он может называться как угодно) сверху прописываю:


@import url('fonts/fonts.css');

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


h1, h2, h3, h4, h5, h6 {
font-family: 'PetersburgC-Italic', Arial;
}

Причем точное название шрифта font-family уже беру из файла styles.css из скачанного архива! Это важно.

По сути на этом подключение нестандартного шрифта закончено. Если вам нужно подключить сразу несколько нестандартных шрифтов, генерируете все шрифты, объединяете все в одном файле styles.css в папке FONTS, а все файлы сгружаете в кучу в эту же папку. Надеюсь моя инструкция будет кому-нибудь полезна, вроде все разжевал.

Другие публикации

Задача: сделать блоки одинаковой высоты, не используя таблицы, кучу лишнего кода. Чтобы было кроссбраузерно, просто и адаптивно.

06.04.2017

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

17.11.2014

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

13.11.2014

Недавно захотел в своем портфолио для наглядности показать как выглядят некоторые эффекты в верстке и сразу понял, что я не умею делать gif’ки.

03.09.2016

Представляю вашему вниманию пожалуй самые необходимые аддоны для WordPress и плагина Advanced Custom Fields совершенно бесплатно, как мы любим. Repeater, Gallery и Option Page.

05.04.2015