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

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

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

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

  1. Находим в интернет подходящий для нас шрифт и скачиваем его. Есть множество ресурсов, откуда можно их скачать. Найти легко в поисковых системах по запросам «шрифты для сайта» и т.п.
  2. Создаем в папке текущей темы сайта вложенную папку с названием fonts. Копируем туда файлы шрифта. У вас будет один или несколько таких файлов с расширениями eot, ttf или woff. Дело в том, что разные производители сделали несколько разных форматов файлов для хранения шрифтов и разные броузеры могут не поддерживать какие-то из форматов. Поэтому если вы скачали шрифт в виде файла, скажем с расширением eot, то лучше сделать на его основе оставшиеся два формата ttf и woff. Это делается с помощью соответствующих интернет-сервисов конвертации. Их можно найти в поисковых системах по запросу «конвертация шрифтов», например http://ru.fonts2u.com/font-converter.html.
  3. Создаем в этом же каталоге fonts файл newfont.css. Вместо newfont вы можете дать название своего шрифта или любое другое.
    Опять же здесь newfont заменяете на ваше название файла.
  4. В основном файле style.css добавляем инструкцию (можно первой строчкой).
    Как видим, здесь мы подключаем наш файл стилей с подключением шрифтов, хранящийся в каталоге fonts.
  5. Шрифт мы подключили. Теперь остается указать его для вывода какого-нибудь элемента сайта. Например в файле style.css для тега body:
    Здесь опять же меняете newfont на cвое название.

3 комментария

  1. Евгений 2 года назад
  2. Vera 8 месяцев назад
  3. Елизавета 6 месяцев назад

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