Два простых способа добавить новый шрифт в 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 - имя файла (может отличаться от названия)

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

Перелинковка ↓
  • Владимир Петрозаводский

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

    • http://www.lucky-seo.com/ Кирилл Лакиманов

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

    • Max

      А куда?

  • http://kremlin.ru/ Destroy Ukraine

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