Здравствуйте, уважаемые друзья. Сегодня мы поговорим о том, как изменить шрифты на сайте. От того какой шрифт или семейство шрифтов используется и зависит вид, в котором предстаёт сайт перед посетителями.
Только здесь не нужно путать заголовки, логотипы, подписи – выполненные в качестве графического изображения, со шрифтами, которые вы можете изменить в таблице стилей или исходном коде.
Этот метод идеально подходит для «лендингов».
Но тут есть несколько нюансов. От которых зависит вид вашего сайта на компьютерах разных пользователей. И сейчас мы разберёмся, от чего это зависит.
Что влияет на отображение шрифтов сайта
Итак, у каждого из нас на компьютере установлены шрифты. Эти шрифты у всех одинаковы и устанавливаются вместе с операционной системой. Но вы можете установить сколько угодно шрифтов и наслаждаться красивым написанием.
Соответственно, эти шрифты будут поддерживаться во всех программах, используемых шрифты.
Для установки дополнительных шрифтов, достаточно скачать их из интернета и загрузить в папку со шрифтами:
пример для Windows
c:\windows\fonts
где, с: — имя раздела жёсткого диска
И соответственно, если у посетителя сайта не установлены дополнительные шрифты, а вы используете на своём сайте один из них – у посетителя будет отображаться ваш сайт, но со шрифтом, определённым по умолчанию в браузере. Которые вы всегда можете поменять.
Вот поэтому наиболее широкое распространение получили шрифты Arial, Times New Roman, Verdana, Tahoma. Эти шрифты используются на львиной доле сайтов и блогов.
Какие параметры отвечают за отображение шрифта на сайте
Вы знаете, что для современных сайтов и блогов (шаблоны WordPress в том числе) используется блочная вёрстка.
А раз так, то можно для каждого блока задавать свои параметры шрифта. Или определить эти параметры для всего сайта один раз. В общем, это уже на ваше усмотрение.
Итак, основными параметрами шрифта являются:
font-family: — какими шрифтами будет отображаться ваш сайт.
font-size: — размер шрифта.
Остальные параметры шрифта, в рамках данной статьи, рассматривать не будем.
Следовательно, поисследовав свой сайт, вы сможете узнать, какими шрифтами отображается ваш сайт.
К примеру, на моём блоге это выглядит так:
font- family: Arial,Verdana;
Что говорит о том, что в первую очередь сайт будет отображаться шрифтом Arial, а если у посетителя его нет (маловероятно), тогда Verdana. А если и его нет, то шрифтом, определённым в браузере.
Как настроить красивые шрифты для всех посетителей
Для того чтобы настроить шрифты на сайте и при этом эти шрифты видели все посетители сайта нужно выполнить несколько простых настроек.
Суть метода в следующем – шрифты будут подгружаться из библиотеки Гугла, и будут отображаться у всех посетителей сайта, независимо установлены эти шрифты на компьютере посетителя или нет.
Ну, давайте приступать.
Шаг 1.
Переходим в библиотеку шрифтов Google. И ищем подходящий шрифт для своего сайта.
Нужно выбрать шрифты, поддерживающие кириллицу. Эти же шрифты будут поддерживать и латинские символы. Следовательно, проблем не будет.
Далее нужно выбрать шрифт, и можно переходить к настройкам.
Шаг 2.
Теперь следует выполнить 4 шага. Учтите, раз вы подгружаете шрифт со стороннего сервера, значит, это влияет на скорость загрузки сайта. В этом, конкретном случае незначительно, но всё же. Как узнать скорость загрузки сайта можете посмотреть здесь.
Первым делом нужно выбрать стиль отображения шрифта.
Далее отмечаете, какие языки должны поддерживаться.
Шаг 3.
Теперь предложенный код на третьем этапе нужно вставить в шаблон вашего сайта.
<link href='http://fonts.googleapis.com/css?family=Lora:400italic&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
Код, предложенный на третьем шаге, нужно вставить в заголовок вашего сайта. Как правило, за заголовок отвечает файл header.php. Код вставляем в теги ХЕД
<head>Ваш код</head>
Шаг 4.
Теперь нужно добавить в таблицу стилей нужный шрифт. Если брать мой блог за пример, то я хочу изменить шрифт только в статьях.
Для того чтобы узнать где вносить изменения нужно нажать правой кнопкой мышки на исследуемом объекте и в контекстно-зависимом меню выбрать «исследовать элемент». Или что-то вроде этого.
Главное, узнать класс нужного блока, в каком файле и в какой строке нужно вносить изменения.
Как видно на скриншоте выше, мне нужно найти в файле style.css (таблица стилей) 183 строку и в неё добавить нужный шрифт.
Так как в редакторе WordPress нет номера строки, я использую поиск (CTRL+F) и ищу класс нужного мне блока. Найдя его, вношу нужные изменения.
Вы, на моём примере, делаете нечто подобное, но со своей темой.
На этом вся эта нехитрая процедура закончена, в итоге у вас изменится шрифт в том блоке, в котором вы вносили изменения. И этот шрифт будет видеть каждый посетитель сайта.
Ну что ж друзья теперь вы знаете, как легко изменить шрифт на сайте. А у меня на этом сегодня всё, если будут вопросы, пишите в комментариях.
И обязательно посмотрите видеоурок, в нём я всё наглядно показываю и рассказываю, всё по теме.
До встречи в следующих статьях.
С уважением, Максим Зайцев.
Да, да … таким нестандартым текстом на сайте можно привлечь большое внимание аудитории, ведь они все привыкли к стандартному шрифту.
Хорошая статья мне нравится !!!
Спасибо, Виталий.
Максим, однозначно отличная статья, ретвитнул. Четыре месяца назад искал эту информацию в сети, еле-еле нашел: в основном все пишут как увеличить текст в браузере. А сайтов с мелким шрифтом-пруд пруди.
Спасибо, Баяс. Вы правы — мелкий шрифт на сайте очень часто встречается. А ведь исправляется это в пару минут. А если ещё и шрифт подобрать со вкусом, тут сразу просыпается интерес к автору.
А я кстати только вашу статью про домены прочитал, хорошая статья. Сейчас коммент напишу.
Привет, Максим) Ага, я когда 9 месяцев назад искала шаблон для блога — от многих отказывалась только из-за того, что шрифт был мелкий и неудобочитаемый…Не знала ведь, что это легко можно самому исправить, а не к верстальщику обращаться:)
Вика, привет. Это действительно важно, ведь от того как будет выглядеть материалы на блоге зависит, захочет ли посетитель вернуться. Конечно же в первую очередь важную роль играет полезность контента, но удобочитаемость не маловажна также.
Как раз возникла проблема со шрифтами. Спасибо за статью!
Здравствуйте, Владимир. Применяйте данный способ и проблем со шрифтами у вас не будет. Удачи!
Оригинальные шрифты зачастую отпугивают посетителей (бывают исключения). Главное чтобы читать можно было — Times new roman из самых известных, ничем не примечателен, но все используют.
Я разные испытывал, это дело вкуса.
Вот еще сервис для определения шрифтов на сайте — https://capyba.ru/services/fontfinder/