self hosting fonts

パーマリンク
/index.html

ウェブサイト（gitページ）

自己ホスティングフォント

私たちの多くは、CDNを介してGoogleフォントを使用しています。しかし、ドイツは、この違反GDPRを決定し、サイトの所有者が訴訟を開始することを決定しました。

以下でGoogleフォントを表示できます。

1. Googleフォントからフォント（バリアント）をダウンロードします
2. .ttfファイルをWebフォントジェネレーターを使用して.woffおよび.woff2に変換し、次に変換します。
3. CSSで @font-faceを使用します
4. HTMLのフォントのプリロード。

注：このページはGoogleフォントに集中していますが、同じ原則が他の種類のWebフォントに適用されます。

Webフォントジェネレーター

フォントリスこれは「Roboto」で機能しましたが、「Lato」と「Open Sans」の両方の静的フォントバージョンで失敗しました。

クリエイティブファブリャ私はこれを「ラト」と「オープンサンズ」静的ファイルに使用しました。各バリアントを一度に1つずつアップロードする必要がありました。

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つのブラウザのみのコンソールに警告が表示されました。警告は2つのタイプでした。
  1. ページが完全にロードされる前に、レイアウトが強制されました。 StyleSheetがまだロードされていない場合、これはスタイルのないコンテンツのフラッシュを引き起こす可能性があります。
  2. 他の警告は各フォントバリアントのものであり、たとえば「lato」の場合、約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/lato/lato-bold-webfont.woff2」のリソースは、リンクプリロードでプリロードされたものは数秒以内に使用されませんでした。プリロードタグのすべての属性が正しく設定されていることを確認してください。
  • スタックオーバーフローに関するディスカッションと検索は、理解できる答えをもたらしませんでした。ただし、Stack Overflowに自分で質問を投稿しました。回答があれば、このreadme.mdを新しい情報で更新します。
• Microsoft Edge

謝辞

情報の大部分は、自己ホスティングフォント（Googleフォントを含む）// @font-faceチュートリアル（YouTube）からのものです。 Preloading/CWVSおよび非GDPRコンプライアンスに関する情報は、同じページのコメントスレッドから表示されました。