• База знаний
  • /
  • Блог
  • /
  • Wiki
  • /
+380 (44) 364 05 71

Как поключить нестандартные HTML шрифты и оптимизировать скрость их загрузки

Оглавление:

При HTML верстке сайта многие верстальщики сталкиваются с разнообразием “художественных шрифтов” в PSD. Также заменить шрифт требуется для редизайна уже готового ресурса.

Разумеется, Вы можно использовать стандартные шрифты предусмотренные в операционной системе: Arial, Times, Georgia и другие. Но для привлекательности Вашего ресурса, чтобы пользователи его лучше запомнили, требуются и уникальные шрифты, которые подобрали для Вас дизайнеры.

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

Что же делать, если шрифт нужно разместить на сайте, а в стандартном наборе операционной системы его нет?

Найти в Фотошопе похожий шрифт и использовать его

  1. Зайдите в Фотошоп и кликните на кнопку “Прямоугольная область”

  2. Выделите нужный Вам шрифт;

Выделите нужный шрифт в PSD макете

  1. Далее в верхнем меню кликаем Текст -> Подбор шрифта;

Далее в верхнем меню кликаем Текст -> Подбор шрифта

  1. Далее система подберет Вам похожие шрифты. Выберите один из них и действующий шрифт будет заменен на доступный для Фотошопа.

Подбор аналогичного шрифта с помощью программы Фотошоп

Нестандартный шрифт KaushanScript  на PSD макете до замены.

Нестандартный шрифт KaushanScript  на PSD макете до замены

Нестандартный шрифт заменили на стандартный Verdana Bold. Невооруженным взглядом рядового пользователя разницы не видно.

Нестандартный шрифт заменили на стандартный Verdana Bold

А вот при замене шрифта Kaushan Script разница уже будет заметна.

Нестандартный шрифт Kaushan Script  на PSD макете до замены

Нестандартный шрифт Kaushan Script  на PSD макете до замены.

Нестандартный шрифт заменили на стандартный Segoe Print Bold

Нестандартный шрифт заменили на стандартный Segoe Print Bold.

Проверяйте каждый шрифт отдельно.

Как подключить нестандартный шрифт через fonts.google.com

Если Вас вариант с заменой шрифта на похожий не устраивает, тогда шрифт можно подключить через fonts.google.com.

Действуйте по следующему алгоритму.

С помощью программы Фотошоп, определите к какому семейству относится шрифт в .PSD макете, который будет использоваться для верстки. Для этого на панели инструментов кликните на значок “перемещение”.

Далее кликните на выбранный Вами текст и во вкладке “символы” Вы увидите название его семейства.

В случае, который указан на картинке - Kaushan Script.

Определение семейтсва шрифта через Фотошоп

Что писать в font-family мы разобрались, теперь рассмотрим, что делать, чтобы такой нестандартный шрифт отображался в верстке и сайте.

Переходим в https://fonts.google.com/.

В строке поиска набираем название необходимого нам шрифта;

Подбор шрифта в Google Fonts

Если нужно, то заходим в выпадающее меню фильтров. Например, в  них Вы можете указать необходимый для Вас язык шрифта. После этого кликаем на изображение выбранного шрифта. Здесь Вы можете установить необходимые стили в соответствии с теми, что указаны в PSD макете.

Настройка стилей шрифта Google Fonts

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

в нашем случае Montserrat, как это можно увидеть с помощью Фотошопа.

Определение шрифта  Montserrat в Фотошопе

Далее аналогично стилю Kaushan, набираем в подборе шрифтов Montserrat.

Подбор шрифта Montserrat в Google Fonts

Как видим из данных Фотошопа в psd макете шрифт Montserrat задан в полужирном виде “bold”.

Соответственно, в настройках стилей выбираем шрифт с жирностью “bold 700”.

Настройка стилей шрифта Montserrat в Google Fonts

Далее, если нужно добавляем и следующие шрифты и стили к ним. А если нет, то копируем выделенную ссылку, которая показана на картинке.

Копируем ее и вставляем между тегами <head></head>:

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="assets/css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Montserrat:400,700&amp;subset=cyrillic-ext" rel="stylesheet">
    <title>Mogo</title>
</head>

Рассмотрим, что мы указали.

Это кодировка UTF-8, привязка к файлу стилей CSS и ссылка-привязка, которую мы скопировали из fonts Google.

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

font-family: 'Kaushan Script', cursive

или

font-family: 'Montserrat', sans-serif

Подключение шрифтов с помощью правила @font-face

При использовании этого способа файлы с шрифтами хранятся вместе с остальными файлами сайта.

Шрифты скачиваются со специальных ресурсов, например с  https://fontstorage.com/ru/

Скачивание шрифта со специальных ресурсов, например с  https://fontstorage.com/ru/

Отбираем файлы с расширениями .woff и .wff2 и закачиваем их в директорию fonts нашего сайта;

Скачиваем файлы с расширением  .woff и .wff2 в директорию fonts нашего ресурса

Использование формата WOFF2 дает нам до 30% экономии во времени загрузки шрифтов.

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

Разберем код @font-face

/*Для каждого шрифта необходимо прописывать отдельное правило */
/* Семейство шрифта, его начертание, насыщенность и способ отображения в браузере */
@font-face {
font-family: "Kaushan Script";
font-style: normal;
font-weight: 400;
font-display: swap;
 /* font-display: swap рекомендуется использовать для заголовков */
 /*Функция local. Браузер сначала попробует найти шрифт локально */
  src: local("Kaushan Script"),
       /* Если не получится, загрузит woff2, указываем директорию, где располагается шрифт с таким расширением */
       url("/fonts/kaushanscript.woff2") format("woff2"),
       /* Если браузер не поддерживает woff2, загрузит woff указываем директорию, где располагается шрифт с таким расширением  */
       url("/fonts/kaushanscript.woff") format("woff");
}
/* Теперь можно использовать шрифт */
body {
  font-family: "Kaushan Script", "Arial", sans-serif;
}

Рассмотрим способы увеличения скорости загрузки страницы с помощью оптимизации загрузки шрифтов

Загрузка требуемого шрифта делится на три периода:

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

  • Замена шрифта. Если браузер за данный период не загрузит заданный шрифт, то он загрузит запасной шрифт;

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

Запасным шрифт считается тот шрифт, который первым указан в свойстве font-family.

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

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

Рассмотрим основные способы такой подзагрузки.

Свойство CSS Font-display и скорость загрузки шрифта

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

Это CSS свойство имеет 5 значений:

  • auto - данное свойство задается браузеру по умолчанию, обычно оно такое же, как и block;

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

  • swap - браузер сразу отображает текст доступным шрифтом, а требуемый для установки шрифт будет дожидаться сколь угодно долго. Но как только шрифт будет загружен, произойдет замена. Благодаря этому пользователь не будет видеть пустого дисплея;

  • fallback - есть небольшой период блокировки шрифта (около 100 ms), далее, если в течении 3- х секунд браузер не загружает заданный шрифт, то будет загружен запасной.

Даже если заданный шрифт будет загружен позже, то замены все равно не произойдет. Это значение стоит где-то посередине между auto и swap;

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

Для отображения заголовков рекомендуем использовать “font-display: swap”, так как их важно показать пользователю как можно быстрее, а потом можно и перерисовать.

Для отображения основного текста рекомендуем использовать “font-display: fallback”, так как не желательно менять большой массив текста после того. как он начал отображаться на экране.

Ассинхронная загрузка fonts.google.com

Для оптимизации скорости загрузки и улучшения показателей Page Speed рекомендуется применять асинхронную загрузку Гугл Шрифтов.

Рассмотрим, как это можно сделать.

Представим, что в тегах <head></head> у Вас есть ссылка на Гугл шрифт, и он выглядит так:

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">

Скачиваем скрипт fonfaceobserver.

Сохраняем его и размещаем у себя на диске в папке /JS. Скрипт должен быть доступен по  адресу:  yousite.com.ua/js/fontfaceobserver.js.

Далее удаляем, а лучше закомментируем  <!— —> нашу ссылку на Гугл шрифт;

Далее в header добавляем скрипт вместо ссылки на гугл шрифт 

<script>
var script = document.createElement('script');
script.async = true;
script.src = 'путь_к_скрипту/fontfaceobserver.js;
script.onload = function () {
// инициализация
var font = new FontFaceObserver('Ваш шрифт');
font.load().then(function () {
document.documentElement.className += " fonts-loaded";
});
};
document.head.appendChild(script);
</script>;
<!---------------------->

А в файлах стилях CSS записываем следующее:

@import url(//fonts.googleapis.com/css?family=Ваш шрифт и начертания);
/* шрифт по умолчанию, до тех пор пока не подгружен новый шрифт */
.fonts-loaded {
body {
font-family: Ваш шрифт, sans-serif;
}
}

Пример:

<script>
var script = document.createElement('script')
script.async = true;
script.src = 'путь_к_скрипту/fontfaceobserver.js';
script.onload = function () {
// инициализация
var font = new FontFaceObserver('Ваш шрифт');
font.load().then(function () {
document.documentElement.className += " fonts-loaded";
});
};
document.head.appendChild(script);
</script>;
А в файлах стилях CSS записываем следующее:
@import url(//fonts.googleapis.com/css?family=Ваш шрифт и начертания);
/* шрифт по умолчанию, до тех пор пока не подгружен новый шрифт */
.fonts-loaded {
body {
font-family: Ваш шрифт, sans-serif;
}
} 

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

https://webformyself.com/google-fonts-uskorit-vremya-zagruzki/ 

Предварительная загрузка шрифтов

Можно указать браузеру, какой шрифт нужно загружать в первую очередь, приоритетнее других. 

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

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

Для этого необходимо перед ссылкой-привязкой задать атрибут “rel” со значением “preload”.

<link rel="preload" href="/fonts/roboto.woff2" as="font">

Ссылку нужно размещать между тегами <head></head>.

Также необходимо добавить тип ресурса, в данном случае — font. 

Выводы

Для подключения шрифтов и оптимизации скорости загрузки используйте следующие методы по приоритету:

  1. Замените нестандартный шрифт на похожий стандартный с помощью функции Текст -> Подбор шрифта. Во многих случаях рядовой пользователь все равно не заметит разницу, убедите в этом себя или заказчика. Обсудите целесообразность замены шрифта на менее "креативный", но с в выыгрышем в скорости загрузки;

  2. Загрузите файлы с расширением .woff и .wff2  с шрифтами к себе на сервер на нашем виртуальном хостинге. Локальная загрузка значительно увеличит скорость. Также настройте асинхронную их загрузку; 

  3. Если нестандартных шрифтов немного (1 или 2), используйте привязку шрифта с помощью fonts.google.com с настройкой асинхронной загрузки;

  4. Для заголовков используйте свойство со значением font-display: swap, а для основного контента - font-display: fallback.

Мы что-то не указали или в чем-то ошиблись?

Напишите об этом в комментариях и мы с удовольствием на них ответим. Также просим Вас свои оценки.

Подписывайтесь на наш телеграмм - канал t.me/freehostua, чтобы быть в курсе новых полезных материалов. Смотрите наш Youtube канал на youtube.com/freehostua.

При подготоке материалов использовались страницы и статьи: компании Adobe, Саши Смыгиной, Лавлинского Николая Евгеньевича, Юрия Матюхина, Заметки Бородача, YouTube каналов BrainsCloud и Ускорение Сайтов :: Метод Лаб.

Спасибо им!

Дата: 06.10.2021
Автор: Яременко Владислав под редакцией Евгения Шермана
Голосование

Авторам статьи важно Ваше мнение. Будем рады его обсудить с Вами:

comments powered by Disqus
Спасибо, что выбираете FREEhost.UA