Как установить украинские шрифты на сайт + в photoshop + в windows

Опыт показывает, что вопрос об использовании сторонних нестандартных шрифтов на сайте или для операционной системы, photoshopa не теряет своей актуальности. И это, честно говоря, радует. Приятно заходить на некоторые сайты или интернет-магазины и видеть необычное оформление, какие-то креативные решения, и шрифт в этом вопросе играет не последнюю роль. Одно дело когда разработчик сайта оставляет на сайте стандартный Arial и совсем другое, когда использует красивый шрифт (конечно, гармонично сочетающийся со всем дизайном). Я не противник стандартных шрифтов, того же Ariala, но когда одним шрифтом оформлено все, то это скучно и серо. В общем, если у вас есть желание подойти к своему сайту или магазину креативно, то вам этот пост пригодится, мы рассмотрим один очень полезный ресурс с большим количеством украинских шрифтов, которые можно будет установить на свой компьютер и в Photoshop, а также использовать на сайте.

Fonts4Web — это украинские шрифты в комплектации TTF + WOFF + EOT

Чем хорош этот ресурс?

— на нем, в отличии от многих других подобных ресурсов, собрана коллекция исключительно украинских шрифтов, то есть отпадает надобность листать и прокручивать кучи англоязычных шрифтов, в которых нет надобности (не вообще, конечно, но для наших украинских текстов латиница не подходит);

— все шрифты разбиты по категориям: sans (без засечек), serif (с засечками), slab, печатные, каллиграфические шрифты, стандартные и другие;

— каждый шрифт можно проверить в действии — написать нужную фразу, слово, предложение и увидеть в нужном шрифте;

— запустить шрифт в действие на своем компьютере и photoshope не составит труда, об этом подробнее ниже;

— можно использовать нестандартные шрифты на сайте без привязки к сторонним ресурсам (например, используя шрифты с google fonts мы привязываем свой сайт к данному ресурсу и если однажды у google fonts возникнут какиe-либо проблемы, то все настроенные нами шрифты не будут отображаться).

Как использовать шрифты? Как установить шрифт в OC (на компьютер)?

Выбираем из списка нужный шрифт, например, мы выбрали шрифт AC Line, и кликаем по нему.

Откроется новая страница. С этой страницей мы и работаем — в самом низу страницы есть кнопка «Скачать шрифт», вот она-то нам и нужна. Кликнув по кнопке, мы скачаем архив с файлами выбранного шрифта на свой компьютер.

ВАЖНО! После клика по этой кнопке происходит редирект на страницу с таймером

через 10 секунд появится ссылка на скачивание. НЕ СКАЧИВАЙТЕ шрифт с главной ссылки, СКАЧИВАЙТЕ С ЗЕРКАЛА! По главной ссылке происходит загрузка exe файла, запустив который вы установите на свой компьютер несколько программ, которые вам совершенно ни к чему. Вы должны скачать архив, а не файл с расширением exe.

Внутри находим файлы, имеющие расширения eot, ttf, woff. Для того, чтобы установить шрифт на Windows нам нужен файл ttf, копируем его и размещаем в системную папку со шрифтами. Папка находится по пути C:/Windows/Fonts, неважно какую версию Windows вы используете, будь то XP, 7, 8, 10 — шрифты хранятся именно в этой папке.

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

Как установить шрифт на сайт? Как подключить понравившийся шрифт?

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

Выбрали мы шрифт AC Line, кликнули по нему, попали на вышеупомянутую страницу и доходим до абзаца с заголовком «Подключение шрифта AC Line в CSS» (или если выбрали другой шрифт, то будет стоять его название в этом заголовке).

Заходим в файлы магазина (либо через ftp-клиент, либо через хостинг), непосредственно в папку с используемым шаблоном (catalog/view/theme/ваша-тема) и создаем новую папку под названием «fonts». Папка с шрифтами должна находиться в той же директории, что и папка со стилями (stylesheet)!

В созданной папке создаем еще одну папку, которая будет носить название шрифта, правда, в несколько «склеенном виде», в данном случае папка будет называться — ACLineRegular. Точное название этой подпапки можно увидеть на этой же странице, с которой мы работаем. Создание этой персональной папки для шрифта необходимо потому, что папка «fonts» является общей папкой для всех шрифтов, которые мы захотим подключить к сайту, а внутри нее уже будут находиться папки с конкретными шрифтами.

В папку «ACLineRegular» загружаем все файлы шрифта из скачанного архива (все три расширения eot, ttf, woff). Открываем файл стилей (чаще всего это stylesheet.css, но точно сможете узнать, зайдя в папку стилей) и подключаем наш шрифт. Для этого размещаем код представленный на странице.

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

Для того, чтобы узнать где находятся стили главного меню в stylesheet.css, в браузере кликаем по меню правой кнопкой мыши и выбираем пункт «Просмотр кода элемента». Эта фраза может отличаться в зависимости от браузера, но будет приблизительно такого же характера.

Инспектируем элемент и видим, что за название каждого пункта меню отвечает ссылка из списка, находящегося в блоке «menu» — #menu > ul > li > a. На данный момент видим, что шрифт ссылок меню — Roboto Condensed. Значит именно ссылке, то есть «а», вместо Roboto Condensed задаем новый шрифт — AC Line.

изображение кликабельно

Справа видим на какой строчке файла stylesheet.css находятся стили для #menu > ul > li > a — строка 338 для моего шаблона, вы же увидите строку своего шаблона.

Открываем файл стилей, находим указанную строку и вместо существующего шрифта прописываем новый шрифт вот такой строкой — font-family: «ACLineRegular»;

Стили должны получить приблизительно такой вид:

 

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

 

И в итоге наше меню примет тот вид, который мы ему попытались придать с помощью нового шрифта.

Шрифт AC Line взят мною лишь как образец, никого не призываю использовать его в главном меню) НЕ забываем, что шрифты, как и все остальные элементы и цвета дизайна, должны придавать сайту или интернет-магазину гармоничности, а не пестрости и аляповатости.

Аналогично тому, как мы применили новый шрифт для ссылок меню, так мы можем теперь использовать любой из 300 шрифтов с сайта Fonts4Web для какого-либо иного текстового элемента сайта.