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