Меняем шрифт на сайте

Меняем шрифт на сайте — обратил внимание, что на старых операционных системах мой сайт ну очень уж убого смотрится. Одна из причин это то, что классические шрифты Arial, Tahoma, Verdana, Sans Serif морально устарели. И если в настройках системы включить "Наилучший вид" и ClearType, то еще более-менее:

Меняем шрифт на сайте

а если этого нет, то дело совсем худо:

Меняем шрифт на сайте

Мне конечно же хочется чтобы:

  1. Шрифт на сайте выглядел красиво;
  2. Чтобы шрифт был независим от настроек операционной системы.

Уже довольно давно "впереди планеты всей шагают" новомодные шрифты. Одним из таких шрифтов является Roboto от компании Google. Этот шрифт встречаю на многих сайтах и смотрится он более чем хорошо.

Меняем шрифт на сайте

Для настройки этого шрифта нужно зайти на https://www.google.com/fonts, найти нужный шрифт через поиск, выбрать какие именно варианты этого шрифта будем подгружать и получить строку вида:

link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'

а затем вставить эту строку внутри тега head в файле header.php установленной темы. И еще обновить CSS:

body,
button,
input,
select,
textarea {
color: #212121;
font-family: 'Roboto', sans-serif;
font-size: 15px;
line-height: 26px;
}

Результат налицо. Еще постараюсь удалить зеленую "кислоту" (цвета #41a62a, #24890d, #55d737 ) стандартной темы WordPress. Пока целиком переделывать дизайн не планирую, но потихоньку-потихоньку все к этому и идет.


Дополнение от 18.06.2016

Удобно и быстро посмотреть какой шрифт используется на сайте можно с помощью расширений браузера. Для Crome и Яндекс браузера это WhatFont и Csscan.

Меняем шрифт на сайте

Updated 10.04.2021

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

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

Обязательно к применению display=swap, делает подгрузку шрифта более плавной для глаза.

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

  • Слева выбираем нужный шрифт;
  • Select charset: cyrillic, latin;
  • Затем Select styles: regular, italic, 700, 700italic;
  • Copy CSS: Modern Browsers;
  • Копируем сгенерированный код в наш CSS;
  • Создаём в корне сайта папку fonts;
  • Download files: скачиваем архив, заливаем файлы из него в созданную папку fonts;
  • Убираем из хедера директивы по загрузки шрифтов, они больше не нужны;
  • В CSS, в секцию @font-face добавляем:
font-display: swap;

Профит. Если не лень и применяется заголовок безопасности Content Security Policy (CSP), то можно подрихтовать и его. Потому с отменой подгрузки шрифтов, он стал немного избыточным.

Leave a Comment

Scroll to Top