Два простых способа добавить новый шрифт в WordPress

Хаки

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

Способ 1 — Google Fonts

  • Достоинства: быстро, просто.
  • Недостатки: часто отображается не всех браузерах.

Все просто: выбираем нужный нам шрифт здесь: www.google.com/fonts и нажимаем Quick-use:

Google Fonts

Далее, выбираем нужный стиль и кодировку (Игорьица, Латиница и т.д.)

Google Fonts

После, копируем код, который необходимо вставить в файл header.php вашей текущей темы между тегами <head></head>.

Google Fonts

И присваиваете в style.css вашей темы новый шрифт для нужных элементов.

Не забудьте проверить сайт во всех браузерах — если не везде отображается одинаково, то смотрим следующий способ.

Способ 2 — загрузить вручную

  • Плюсы: работает на всех стандартных и современных браузерах.
  • Минусы: нужно править файл стилей своего сайта.

Скачиваем понравившийся нам шрифт в формате .ttf на любом специализированном сайте:

Инструкция для самых маленьких

И по FTP загружаем на сайт — я советую в папку вашей темы. Затем, в файле стилей (обычно это style.css) вставляем следующее:

@font-face {
    font-family: Archangel;
    src: local("Archangel"),
         url(/wp-content/themes/mytheme/42852.ttf);
  }

Пояснение:

  • font-family: Archangel; — название
  • src: local(«Archangel»), — проверка, есть ли у пользователя такой шрифт в ОС, если нет — загружаем наш
  • url(/wp-content/themes/mytheme/42852.ttf); — путь до нашего, где 42852.ttf — имя файла (может отличаться от названия)

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

Оцените статью
Добавить комментарий

  1. Владимир Петрозаводский

    /wp-content/themes/mytheme/42852.ttf — это самый неправильный способ подключать ресурсы, почему не 42852.ttf, вы бы туда еще имя домена для надежности вписали

    Ответить
    1. Игорь Градов

      42852.ttf указано в качестве примера

      Ответить
    2. Max

      А куда?

      Ответить
  2. Destroy Ukraine

    а что быстрее, google fonts или @font-face

    Ответить