Самостоятельные шрифты

Самостоятельные шрифты — это файлы шрифтов, которые обслуживаются с ваших собственных серверов, а не с серверов стороннего поставщика шрифтов (например, Google Fonts).

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

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

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

  • WOFF2 : из современных шрифтов WOFF2 является новейшим, имеет самую широкую поддержку браузеров и обеспечивает лучшее сжатие. Поскольку WOFF2 использует Brotli, он сжимает на 30% лучше, чем WOFF.

Для дальнейшего повышения производительности рассмотрите возможность использования подмножества шрифтов . Подмножество шрифтов — это практика разбиения файла шрифта на более мелкие подмножества, обычно с целью удаления неиспользуемых глифов. Это может значительно уменьшить размер файла шрифта. Инструменты для создания подмножеств шрифтов включают fontkit , subfont и glyphhanger .

Дополнительные сведения о рекомендациях по использованию автономных шрифтов см. в разделе Использование автономных шрифтов .

Пример:

HTML

<head>
    <style>
        @font-face {
            font-family: 'Google Sans';
            src: url("Google Sans.woff2") format('woff2');
            font-display: swap;
        }
        body {
            font-family: system-ui;
            font-size: 1em;
        }
        h1 {
            font-family: 'Google Sans', sans-serif;
            font-size: 3em;
        }
    </style>
</head>