Построение сайта, продвижение, работа в сети

Как изменить шрифт на сайте на движке WordPress

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

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

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

Подключение библиотеки шрифтов

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

Шрифт в этом случае подгружается с сервера Google и тогда выбранный сайтостроителем шрифт будет отображаться в браузере любого посетителя.

Для начала откроем библиотеку шрифтов Google по адресу www.google.com/fonts, слева в скриптах выбираем кириллицу – Cyrillic, то есть шрифты, которые поддерживают русский язык.

Библиотека шрифтов Google

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

Выбираем шрифт

Затем открываем код шрифта, нажимая на Quick-use, и в этом же окне справа Google советует обратить внимание на скорость загрузки.

Дело в том, что если мы решили подгружать шрифт со стороннего сервера, то это в той или иной мере будет влиять на скорость загрузки страницы и Google честно предупреждает не злоупотреблять таким приемом.

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

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

Скорость загрузки страницы

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

Как изменить шрифт на сайте

В этом же окне, ниже, в пунктах 3 и 4, приводятся необходимые коды.

14

Из пункта 3 копируем код в буфер обмена и вставляем в заголовок сайта или какой-либо одной статьи, например, Редактирование изображений без фотошоп.

Для этого нажимаем правой кнопкой мыши на тексте статьи, находим пункт Просмотр кода элемента, в открывшемся окне опять правой кнопкой мыши открываем заголовок сайта, выбираем пункт Редактирование HTML и в поле вставляем код.

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

Теперь нужно определиться с блоком, который отвечает за вывод этого текста. Справа видим параметры, отвечающие за сам шрифт – за размер, стиль и т. д. Именно сюда будем добавлять код из пункта 4.

15

И теперь можно просмотреть страницу, в которой мы заменили шрифт на экзотический.

Измененный шрифт

Рукописный шрифт читать, правда, не совсем удобно, но смотрится, в принципе, неплохо. Таким образом, поставленную задачу, как изменить шрифт на сайте, решить можно.

Разберемся, как это сделать непосредственно в исходном коде, потому что до этого все наши манипуляции сойдут на нет, если мы обновим страницу.

Переходим в панель управления WordPress и вносим эти изменения в исходный код страницы. В панели управления идем – Внешний видРедактор, находим файл, отвечающий за заголовок – header.php, открываем его и нужно установить код до закрытия тега </head>, то есть вставляем сюда вызов библиотеки – код из пункта 3. Обновляем файл.

Вставляем код вызова библиотеки

Затем нужно открыть таблицу стилей и найти нужный нам класс. Каждый блок имеет свой класс, посмотреть его можно в окне Просмотр кода элемента и там же отображается номер строки, где эти условия прописаны. В данном случае это class=”art-postcontent.clearfix”.

Нужный класс в окне таблицы стилей можно найти при помощи поиска, набрав сочетание клавиш Ctrl+F. Вводим в строку поиска art-postcontent.clearfix и получаем выделение его в таблице стилей. Сюда добавляем необходимый скрипт из пункта 4.

Вносим изменения в таблицу стилей

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

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

Эти изменения будут также сохраняться при открытии сайта в любом другом браузере при условии, если кэш браузера будет почищен. Иначе страницы могут загружаться из него и изменений можно сразу и не увидеть.

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.

Поиск Яндекса
Группа Компьютерная грамотность
Подпишитесь на новости

Введите ваш email адрес:

Media Markt
Gyrotown