Сторонние шрифты

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

В приведенном ниже примере сочетаются два метода повышения производительности для максимально быстрой загрузки стороннего шрифта: использование встроенных объявлений шрифтов и использование подсказок ресурсов preconnect . Хотя этот фрагмент кода демонстрирует, как загружать шрифты из Google Fonts , эти методы также применимы и к другим сторонним поставщикам шрифтов.

  • Встроенные объявления шрифтов . Встраивание объявлений font-family в основной документ вместо включения этой информации во внешнюю таблицу стилей позволяет браузеру определять, какие файлы шрифтов будут использоваться на странице, не дожидаясь загрузки отдельного файла таблицы стилей. Это важно, поскольку обычно браузеры не загружают файлы шрифтов, пока не узнают, что они используются на странице. В большинстве ситуаций встроенные объявления шрифтов предпочтительнее использования preload для загрузки шрифтов .

  • Предварительное подключение . Рекомендуемый способ загрузки шрифтов Google — использование тега <link> в сочетании с подсказками ресурсов preconnect . Подсказка ресурса preconnect устанавливает раннее соединение со сторонним источником. В приведенном ниже фрагменте кода первая подсказка ресурса устанавливает соединение для загрузки таблицы стилей шрифта; вторая подсказка ресурса устанавливает соединение для загрузки файлов шрифтов.

Пример:

HTML

<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: system-ui;
            font-size: 1em;
        }
        h1 {
            font-family: 'Zen Tokyo Zoo', sans-serif;
            font-size: 3em;
        }
    </style>
</head>