Делаем красивые шрифты на сайте WordPress
Восприятие интернет-пользователем сайта во многом зависит от используемых шрифтов. К сожалению, стандартная коллекция шрифтов ограничена, что не позволяет сделать сайт действительно красивым.
Но есть выход — использование шрифтов из коллекции Google Fonts. Сервис позволяет использовать для оформления сайта или блога шрифт, даже если он не установлен на компьютере пользователя. Сейчас мы рассмотрим, как добавить любой шрифт Google Fonts в вашу тему WordPress.
Есть несколько способов сделать это, мы рассмотрим два из них.
Простой способ как добавить шрифты для WordPress:
1. Заходим на сайт библиотеки шрифтов, где выбираем подходящий шрифт;
2. Под выбранным шрифтом находится кнопка Quick-use. Нажимаем на нее:
3. После клика вы будете перемещены на другую страницу, где будет форма «Add this code to your website»:
4. Откройте текстовый редактор и скопируйте в него полученный код, его мы и будем использовать для вставки шрифта на сайт.
5. Далее открываем папку с темой, ищем файл под названием style.css и вставляем в него полученный код:
[php]
@import url(http://fonts.googleapis.com/css?family=Squada+One);
[/php]
Данный метод является простым и часто используемым, но имеет недостатки. При использовании метода @import сайт не будет загружать содержимое сайта до тех пор, пока не файл шрифта не будет загружен полностью. Это снизит показатели производительности и скорости сайта.
Особенно ощутимо падение производительности будет при использовании нескольких шрифтов.
Стандартный способ добавления шрифтов:
Следующий метод является более трудоемким, но не влияет на производительность ресурса. Он заключается в использовании ссылок.
- Нам понадобятся ссылки, полученные в шаге 3 предыдущей инструкции.
- Ищем в папке с темой файл header.php и добавляем в него код:
[php]<link href=’http://fonts.googleapis.com/css?family=Squada+One’ rel=’stylesheet’ type=’text/css’>[/php]
- В нужном файле css добавляем код с выбранным шрифтом:
[php]h1 {
font-family: ‘Squada One’, Helvetica, Arial, serif;
}[/php]
Преимущество второго метода — запрос к шрифту отправляется на ранней стадии загрузки сайта, благодаря чему не оказывается влияние на скорость его загрузки.
Напишите ответ
Для отправки комментария вам необходимо авторизоваться.
