self hosting fonts

Постоянная ссылка
/index.html

Веб -сайт (GIT Pages)

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

Многие из нас используют шрифты Google через CDN. Тем не менее, Германия решила, что это противоречит GDPR, в результате чего владельцы участков открыты для судебных разбирательств.

Мы все еще можем отображать шрифты Google по:

1. Загрузка шрифта (варианты) из Google Fonts, затем
2. Преобразование файлов .ttf в .woff и .woff2 с использованием генератора веб -шрифтов, затем
3. используя @font-face в CSS и
4. Предварительная загрузка шрифтов в HTML.

Примечание . Эта страница концентрируется на шрифтах Google, но те же принципы применимы к любому другому веб -шрифту.

Генераторы веб -шрифтов

Шрифт белка работал на «Робото», но потерпел неудачу со статическими версиями шрифта как «Лато», так и «Открыто без».

Creative Fabrica Я использовал это для статических файлов "Lato" и "Open Sans". Мне приходилось загружать каждый вариант, по одному.

HTML

Мне посоветовали предварительно загрузить шрифты в главе HTML -страницы. Это должно ускорить доставку шрифтов и повысить производительность Google Core Web Vitals (CWVS). Тем не менее, я видел предупреждения после этого (см. Тестирование/Firefox и Firefox Developer Edition, ниже).

 < head >
  < link
    rel =" preload "
    href =" roboto-light-webfont.woff2 "
    as =" font "
    type =" font/woff2 "
    crossorigin =" anonymous "
  />
  < link
    rel =" preload "
    href =" roboto-regular-webfont.woff2 "
    as =" font "
    type =" font/woff2 "
    crossorigin =" anonymous "
  />
  < link
    rel =" preload "
    href =" roboto-medium-webfont.woff2 "
    as =" font "
    type =" font/woff2 "
    crossorigin =" anonymous "
  />
  ...
  <!-- CSS file comes after preload -->
</ head > 

CSS

 @font-face {
  font-family : "Roboto" ;
  font-weight : 300 ;
  src : url ( "roboto-light-webfont.woff2" ) format ( "woff2" ) , url ( "roboto-light-webfont.woff" )
      format ( "woff" );
}
/** Regular: 400 **/
@font-face {
  font-family : "Roboto" ;
  font-weight : 400 ;
  src : url ( "roboto-regular-webfont.woff2" ) format ( "woff2" ) , url ( "roboto-regular-webfont.woff" )
      format ( "woff" );
}
/** Medium: 500 **/
@font-face {
  font-family : "Roboto" ;
  font-weight : 500 ;
  src : url ( "roboto-medium-webfont.woff2" ) format ( "woff2" ) , url ( "roboto-medium-webfont.woff" )
      format ( "woff" );
}

Тестирование

• Протестировано на:
• Windows 10
• Хром
• Firefox, Firefox Developer Edition
  • Примечание . Предупреждения были показаны в консолях только этих двух браузеров. Предупреждения были 2 типа:
  1. Макет был вынужден до того, как страница была полностью загружена. Если таблицы стилей еще не загружены, это может привести к вспышке непрерывного контента.
  2. Другие предупреждения были для каждого варианта шрифта, и это произошло примерно через 10 секунд, например, для «Лато»:
  • Ресурс в «https://chrisnajman.github.io/self-hosting-fonts/fonts/lato/lato-light-webfont.woff2», предварительно загруженный предварительным нагрузкой ссылки, не использовался в течение нескольких секунд. Убедитесь, что все атрибуты тега предварительной загрузки установлены правильно.
  • Ресурс в «https://chrisnajman.github.io/self-hosting-fonts/fonts/lato/lato-regular-webfont.woff2», предварительно загруженный предварительным нагрузкой ссылки, не использовался в течение нескольких секунд. Убедитесь, что все атрибуты тега предварительной загрузки установлены правильно.
  • Ресурс в «https://chrisnajman.github.io/self-hosting-fonts/fonts/lato/lato-bold-webfont.woff2», предварительно загруженный предварительным нагрузкой ссылки. Убедитесь, что все атрибуты тега предварительной загрузки установлены правильно.
  • Обсуждение и поиск по переполнению стека не дали понятного ответа. Тем не менее, я сам разместил вопрос о переполнении стека, и если на него ответили, я обновлю этот readme.md с любой новой информацией.
• Microsoft Edge

Благодарности

Основная часть информации поступила из-за разъясненных шрифтов (включая шрифты Google) // @font-face (YouTube). Информация о предварительной загрузке/CWV, а также соблюдение не GDPR появилась из потока комментариев на той же странице.