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

Want create site? Find Free WordPress Themes and plugins.

Давно не писал в блоге, уже 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 (в основном файле стилей для шаблона, у вас он может называться как угодно) сверху прописываю:

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

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

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

Чтобы чуть чуть разбавить монотонность полученной информации предлагаю посмотреть крутой ролик ремонта двухкомнатной квартиры, процесс ремонта чувак снимал на протяжении 120 дней, очень крутое видео :)

Did you find apk for android? You can find new Free Android Games and apps.
Want create site? Find Free WordPress Themes and plugins.

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

Did you find apk for android? You can find new Free Android Games and apps.
24.11.2015
Want create site? Find Free WordPress Themes and plugins.

Градиент можно сделать конечно же в Photoshop, но иногда можно обойтись и CSS. Сервис предлагает пользователю в режиме онлайн создать необходимый ему градиент, после вам необходимо будет всего-лишь скопировать код и применить его к своему элементу.

Did you find apk for android? You can find new Free Android Games and apps.
13.11.2014
Want create site? Find Free WordPress Themes and plugins.

Представляю вашему вниманию пожалуй самые необходимые аддоны для wordpress и advanced custom fields совершенно бесплатно, как мы любим :) Repeater, Gallery и Option Page.

Did you find apk for android? You can find new Free Android Games and apps.
05.04.2015
Want create site? Find Free WordPress Themes and plugins.

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

Did you find apk for android? You can find new Free Android Games and apps.
14.11.2014
Want create site? Find Free WordPress Themes and plugins.

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

Did you find apk for android? You can find new Free Android Games and apps.
17.11.2014