Показ всего текста во время загрузки веб-шрифтов из google fonts

685
Алексей,

С недавних пор ресурс fonts.googleapis.com стал поддерживать свойство "font-display". С помощью него можно пройти еще одну рекомендацию Google PageSpeed.

Добавьте в конце адреса параметр display равный swap и рекомендация "Настройте показ всего текста во время загрузки веб-шрифтов" будет пройдена.

Пример:
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

Так же важно, что бы в свойствах font-family, помимо основного шрифта, был задан встроенный шрифт замены. Например:

.wrapper{
    font-family: 'Open Sans', sans-serif;
}

Если вы подключаете локальные шрифты, то в font-face нужно добавить свойство font-display: swap;

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), url(/path/to/open-sans.woff2) format('woff2');
}
Опубликовано 22 Июня 2019 | Обновлено 3 Сентября 2019
разработчику, производительность

Возврат к списку

Похожие статьи
Оптимизация сайта для google pagespeed, 100 из 100 0
Собрал все посты в одном для получения максимального балла в Google PageSpeed Insights.
Читать дальше »
Алексей,
Свойство списком или справочником 0
Сравнил производительность 2-х типов свойств. Результаты в таблице:
Читать дальше »
Алексей,
Комментарии
Андрей
22 Июл 2019
Была: switch ($sky_fonts_settings) {
            case 1: wp_register_style('googlefont', 'https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700&subset=cyrillic'); break; // font-family: 'Ubuntu', sans-serif;
Я её правильно изменил?
Алексей
Алексей
23 Июл 2019
Андрей, добрый день. Просто добавьте &display=swap после subset=cyrillic.
Андрей
22 Июл 2019
Добрый день. Также, у меня ещё вопрос, эти ссылки ставив в Header.ptp?
Ниже, которую я привел, находится в функциях. Получается:
<li nk href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700&display=swap" rel="stylesheet">
Я правильно составил?
Андрей
22 Июл 2019
А если в закрузк:
function google_font_styles() {
    if (!is_admin()) {
        $sky_fonts_settings = get_option('sky_fonts_settings');
        switch ($sky_fonts_settings) {
            case 1: wp_register_style('googlefont', 'https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700&subset=cyrillic'); break; ...