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

Красивый шрифт способен сильно улучшить внешний вид сайта, особенно когда он гармонирует с тематикой сайта или выглядит необычно и стильно.

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

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

1. Находим в интернет подходящий для нас шрифт и скачиваем его. Есть множество ресурсов, откуда можно их скачать. Найти легко в поисковых системах по запросам «шрифты для сайта» и т.п.
2. Создаем в папке текущей темы сайта вложенную папку с названием fonts. Копируем туда файлы шрифта. У вас будет один или несколько таких файлов с расширениями eot, ttf или woff. Дело в том, что разные производители сделали несколько разных форматов файлов для хранения шрифтов и разные броузеры могут не поддерживать какие-то из форматов. Поэтому если вы скачали шрифт в виде файла, скажем с расширением eot, то лучше сделать на его основе оставшиеся два формата ttf и woff. Это делается с помощью соответствующих интернет-сервисов конвертации. Их можно найти в поисковых системах по запросу «конвертация шрифтов», например http://ru.fonts2u.com/font-converter.html.
3. Создаем в этом же каталоге fonts файл newfont.css. Вместо newfont вы можете дать название своего шрифта или любое другое.
   
   @font-face { font-family: 'newfont'; src: url('newfont.eot'); src: url('newfont.eot?#iefix') format('embedded-opentype'), url('newfont.woff') format('woff'), url('newfont.ttf') format('truetype'); }

   1 2 3 4 5 6 7

   @font-face { font-family: 'newfont'; src: url('newfont.eot'); src: url('newfont.eot?#iefix') format('embedded-opentype'), url('newfont.woff') format('woff'), url('newfont.ttf') format('truetype'); }

   Опять же здесь newfont заменяете на ваше название файла.
4. В основном файле style.css добавляем инструкцию (можно первой строчкой).
   
   @import "fonts/newfont.css" all;

   1	@import "fonts/newfont.css" all;

   Как видим, здесь мы подключаем наш файл стилей с подключением шрифтов, хранящийся в каталоге fonts.
5. Шрифт мы подключили. Теперь остается указать его для вывода какого-нибудь элемента сайта. Например в файле style.css для тега body:
   
   body { font-family: 'newfont'; }

   1 2 3

   body { font-family: 'newfont'; }

   Здесь опять же меняете newfont на cвое название.