Наверное, многие из Вас сталкивались с ситуацией, когда необходимо подключить определённый нестандартный шрифт на свой сайт. Зачем это может понадобиться, ведь, как известно наиболее благоприятным шрифтом для сайта является Verdana. Причин тому может быть несколько – уникальный дизайн шаблона, просто захотелось, да мало ли еще какие могут быть причины.
С использованием стандартных шрифтов проблем, как правило, не возникает. Все что необходимо сделать, это задать определенное CSS свойство:
font-family: Times New Roman, Verdana, sans-serif;
Таким образом, мы указываем семейство шрифтов, которые будут применены к тому или иному элементу страницы. Но как быть, если подходящего шрифта нет в библиотеке шрифтов? В этом, конечно же, нет ничего страшного, и на данный момент существует, как минимум два способа использовать уникальные шрифты для своего сайта:
- Воспользоваться сервисом от Google;
- Физически добавить шрифт на свой сайт с последующим подключением.
Как пользоваться сервисом Google Web Fonts мы уже говорили в одной из предыдущих статей, а сегодня разберем второй вариант – физически добавим шрифт на сайт.
Все что от нас потребуется это скачать нужный шрифт с одного из множества сайтов, с поиском в Яндексе думаю, проблем нет ни у кого. Но тут есть одно правило, шрифт обязательно должен быть в формате TTF или OTF. Я в качестве примера выбрал шрифт Noteworthy Light (достаточно оригинальный шрифт).
После того как шрифт скачали, переходим на сайт www.font2web.com и жмем на кнопку «Выберите файл»:
Указываем место расположения нашего шрифта, после чего жмем на кнопку «Convert & Download». На этом полдела можно считать сделанным, ждем окончания загрузки архива с нашим шрифтом. Его содержимое будет примерно следующим:
Как только архив загрузится, открываем его и копируем содержимое папки fonts в одноименную папку Вашего шаблона (имя_сайта/templates/имя_шаблона/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 файл уже содержит подобные свойства для данного элемента, но они нам не нужны и есть желание их переопределить (в моем случае именно так и произошло). Результат проделанных манипуляций следующий:
Вот и все, как видите подключить свой собственный шрифт для сайта совсем не сложно, занимает все это дело не более одной минуты, а результат Вас обязательно порадует. На этом я завершаю данную статью, до скорых встреч.
