self hosting fonts

永久链接
/index.html

网站（git页）

自我托管字体

我们中的许多人通过CDN使用Google字体。但是，德国决定违反GDPR，使现场所有者开放诉讼。

我们仍然可以通过：

1. 从Google字体下载字体（变体），然后
2. 使用Web字体生成器将.TTF文件转换为.WOFF和.WOFF2，然后
3. 在CSS中使用 @font-face
4. 预装HTML中的字体。

注意：此页面集中在Google字体上，但是相同的原理适用于任何其他类型的Web字体。

Web字体生成器

字体松鼠这适用于“ Roboto”，但由于“ Lato”和“ Open Sans”的静态字体版本失败。

Creative Fabrica我将其用于“ Lato”和“ Open Sans”静态文件。我必须一次上传每个变体。

html

建议我在HTML页面的头部预加载字体。这应该可以加快字体的交付并提高Google的核心网络生命力（CWVS）性能。但是，我在执行此操作后看到了警告（请参阅下面的测试/Firefox和Firefox开发人员版）。

 < 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开发人员版
  • 笔记。警告仅在这两个浏览器的游戏机中显示。警告有两种类型：
  1. 在完整加载页面之前，要进行布局。如果尚未加载样式表，则可能会导致未风格的内容。
  2. 其他警告是针对每个字体变体的，发生在大约10秒后，例如“ Lato”：
  • “ https://chrisnajman.github.io/self-hosting-fonts/fonts/lato/lato-lato-lata-light-webfont.woff2”上的资源在几秒钟内未使用。确保正确设置了预加载标签的所有属性。
  • “ https://chrisnajman.github.io/self-hosting-fonts/fonts/fonts/lato/lato-regular-regular-regular-webfont.woff2”的资源在几秒钟内未使用。确保正确设置了预加载标签的所有属性。
  • “ https://chrisnajman.github.io/self-hosting-fonts/fonts/fonts/lato/lato-bold-webfont.woff2”上的资源在几秒钟内未使用。确保正确设置了预加载标签的所有属性。
  • 讨论和搜索堆栈溢出尚未得到可理解的答案。但是，我在堆栈溢出上发布了一个问题，如果回答了，我将使用任何新信息更新此readme.md。
• Microsoft Edge

致谢

大部分信息来自解释的自托管字体（包括Google字体）// @font-face教程（YouTube）。有关预加载/CWV和非GDPR依从性的信息从同一页面上的注释线程中出现。