Как добавить шрифт на сайт? Рассмотрим онлайн сервисы и способы подключения

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

С использованием стандартных шрифтов проблем, как правило, не возникает. Все что необходимо сделать, это задать определенное CSS свойство:

font-family: Times New Roman, Verdana, sans-serif;

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

  • Воспользоваться сервисом от Google;
  • Физически добавить шрифт на свой сайт с последующим подключением.

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

Все что от нас потребуется это скачать нужный шрифт с одного из множества сайтов, с поиском в Яндексе думаю, проблем нет ни у кого. Но тут есть одно правило, шрифт обязательно должен быть в формате TTF или OTF. Я в качестве примера выбрал шрифт Noteworthy Light (достаточно оригинальный шрифт).
После того как шрифт скачали, переходим на сайт www.font2web.com и жмем на кнопку «Выберите файл»:

Онлайн сервис генерации web-шрифтов

Указываем место расположения нашего шрифта, после чего жмем на кнопку «Convert & Download». На этом полдела можно считать сделанным, ждем окончания загрузки архива с нашим шрифтом. Его содержимое будет примерно следующим:

Содержимое архива со шрифтами и стилями

Как только архив загрузится, открываем его и копируем содержимое папки fonts в одноименную папку Вашего шаблона (имя_сайта/templates/имя_шаблона/fonts):

Набор шрифтов в папке Fonts, их мы и будем использовать на нашем сайте

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

/** Generated by FG **/
@font-face {
 font-family: 'Conv_Noteworthy-Lt';
 src: url('fonts/Noteworthy-Lt.eot');
 src: local('☺'), url('fonts/Noteworthy-Lt.woff') format('woff'), url('fonts/Noteworthy-Lt.ttf') format('truetype'), url('fonts/Noteworthy-Lt.svg') format('svg');
 font-weight: normal;
 font-style: normal;
}

Все что от нас потребуется это немного подправить пути до файлов шрифта и привести код к такому виду:

@font-face {
 font-family: 'NoteLt';
 src: url('../fonts/Noteworthy-Lt.eot');
 src: local('☺'), url('../fonts/Noteworthy-Lt.woff') format('woff'), url('../fonts/Noteworthy-Lt.ttf') format('truetype'), url('../fonts/Noteworthy-Lt.svg') format('svg');
 font-weight: normal;
 font-style: normal;
}

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

Осталось только применить наш новый шрифт к элементам на сайте, например для заголовков:

h2{font-family:'NoteLt', sans-serif !important;}

Параметр important устанавливается в том случае, когда другой css файл уже содержит подобные свойства для данного элемента, но они нам не нужны и есть желание их переопределить (в моем случае именно так и произошло). Результат проделанных манипуляций следующий:

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

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

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