Делаем красивые шрифты на сайте WordPress

Share on Pinterest
Share with your friends










Отправить
7
Всего

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

Но есть выход — использование шрифтов из коллекции Google Fonts. Сервис позволяет использовать для оформления сайта или блога шрифт, даже если он не установлен на компьютере пользователя. Сейчас мы рассмотрим, как добавить любой шрифт Google Fonts в вашу тему WordPress.

Есть несколько способов сделать это, мы рассмотрим два из них.

Простой способ как добавить шрифты для WordPress:

1. Заходим на сайт библиотеки шрифтов, где выбираем подходящий шрифт;
2. Под выбранным шрифтом находится кнопка Quick-use. Нажимаем на нее:

fonts2 fonts1

3. После клика вы будете перемещены на другую страницу, где будет форма «Add this code to your website»:

fonts2

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

5. Далее открываем папку с темой, ищем файл под названием style.css и вставляем в него полученный код:

@import url(http://fonts.googleapis.com/css?family=Squada+One);

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

Особенно ощутимо падение производительности будет при использовании нескольких шрифтов.

Стандартный способ добавления шрифтов:

Следующий метод является более трудоемким, но не влияет на производительность ресурса. Он заключается в использовании ссылок.

  1. Нам понадобятся ссылки, полученные в шаге 3 предыдущей инструкции.
  2. Ищем в папке с темой файл header.php и добавляем в него код:
    <link href='http://fonts.googleapis.com/css?family=Squada+One' rel='stylesheet' type='text/css'>
  3. В нужном файле css добавляем код с выбранным шрифтом:
    h1 {
        font-family: 'Squada One', Helvetica, Arial, serif;
    }

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

Share on Pinterest
Share with your friends










Отправить
7
Всего


Похожие записи

Комментарии к “Делаем красивые шрифты на сайте WordPress”
  1. lusia 06.10.2016
  2. Garri 06.10.2016
  3. lusia 06.10.2016
  4. Garri 06.10.2016
  5. Васявася 06.10.2016
  6. Garri 06.10.2016
  7. Di Ost 06.10.2016

Напишите ответ