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

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

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

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

Выше можете увидеть один из макетов реализованных для моего клиента, здесь видно, что применяется сразу 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, а все файлы сгружаете в кучу в эту же папку. Надеюсь моя инструкция будет кому-нибудь полезна, вроде все разжевал.

Поделиться в социальных сетях
ВКонтакте
Facebook
WhatsApp
Telegram
Автор статьи
Метки
Выгодный хостинг
Хостинг Beget

Выгодная партнёрская программа! Верните на свой счёт 20% с любой суммы от оплаты хостинга Beget!

Новое в блоге

Добавить комментарий

Смотрите также

Watch now

Написать в мессенджер

Связаться с нами прямо сейчас!