google-webfonts-helper を使って、Google font を server に設置する

自ブログで、Goolge font を使用していますが、
PageSpeed Insights で、
CSS の配信を最適化する  |  PageSpeed Insights  |  Google Developers
の警告が出力されています。

こちら、毎回 fontを https://fonts.googleapis.com に取得しにいくのではなく、
server 上に置いて取得するようにして、解決できないか試してみた結果を記載します。

参考サイト

• Googleフォントをダウンロードし、自前のサーバーに設置して利用する方法

• ページ読み込みが早まることもある！ Googleフォントをダウンロードしてみよう ｜ ライフハッカー［日本版］

• 【2016年版】Google Fontsで公開されているフォントをダウンロードしてPC上で利用する方法 | GLOSSY [グロッシー]

• How to host google web fonts on my own server? - Stack Overflow

• オープンソースで公開されている、Google Web Fontの補助ツール・「Google Webfonts Helper」 - かちびと.net

対象の font ファイルを取得する

Google Fonts から、対象の font ファイルをダウンロードできるのですが、
使用しているのが、 Mac OSX だからなのか ttf ファイルのみダウンロードが可能でした。
woff2、eof などの形式もまとめてダウンロードする方法がないか調べたところ、
以下のサイトでまとめて、ダウンロードができるようです。

• localfont.com - Download fonts from googlefonts

• google webfonts helper

localfont.com で、ダウンロードしたところ、上限バイト数が厳しいようで、
google webfonts helper を使ってダウンロードすることにします。

https://google-webfonts-helper.herokuapp.com/fonts にアクセスする

1.TOP ページ

TOP ページ左上の TextBox に、ダウンロードしたい。Font 名を入力します。

2.Download ページ

Font名を入力して、対象 Font をクリックすると、Download ページが表示されます。
以下、個人的に使用した箇所の説明を記載します。

• Select styles
  ダウンロードするfont-style を選択可能です。¹
  [1] Font はよく知らないのですが、スタイルごとにフォントファイルが異なるようです。

• Copy CSS
  Modern ブラウザだけサポートするか、過去のブラウザまで広くサポートするcssを出力するか、選択可能です。
  fontの配置パスは下部のテキストボックスにパスを入力することで、変更可能です。

• Download files
  ボタンクリックで、選択した内容の各種フォントファイルがダウンロード可能です。
  Select styles で以下を選択した状態で、ボタンクリックすると、
  

  regular
  italic
  700
  700italic
  

  以下のフォントファイルを含むzipファイルがインストールされました。
  

  lora-v10-cyrillic-700.eot
  lora-v10-cyrillic-700.svg
  lora-v10-cyrillic-700.woff
  lora-v10-cyrillic-700.woff2
  lora-v10-cyrillic-700italic.eot
  lora-v10-cyrillic-700italic.svg
  lora-v10-cyrillic-700italic.woff
  lora-v10-cyrillic-700italic.woff2
  lora-v10-cyrillic-italic.eot
  lora-v10-cyrillic-italic.svg
  lora-v10-cyrillic-italic.woff
  lora-v10-cyrillic-italic.woff2
  lora-v10-cyrillic-regular.eot
  lora-v10-cyrillic-regular.svg
  lora-v10-cyrillic-regular.woff
  lora-v10-cyrillic-regular.woff2
  

  この際出力されたcssは以下の通りです。
  

  /* lora-regular - cyrillic */
  @font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400;
    src: url('/static/fonts/lora-v10-cyrillic-regular.eot'); /* IE9 Compat Modes */
    src: local('Lora Regular'), local('Lora-Regular'),
         url('/static/fonts/lora-v10-cyrillic-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/static/fonts/lora-v10-cyrillic-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('/static/fonts/lora-v10-cyrillic-regular.woff') format('woff'), /* Modern Browsers */
         url('/static/fonts/lora-v10-cyrillic-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/static/fonts/lora-v10-cyrillic-regular.svg#Lora') format('svg'); /* Legacy iOS */
  }
  /* lora-italic - cyrillic */
  @font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400;
    src: url('/static/fonts/lora-v10-cyrillic-italic.eot'); /* IE9 Compat Modes */
    src: local('Lora Italic'), local('Lora-Italic'),
         url('/static/fonts/lora-v10-cyrillic-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/static/fonts/lora-v10-cyrillic-italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('/static/fonts/lora-v10-cyrillic-italic.woff') format('woff'), /* Modern Browsers */
         url('/static/fonts/lora-v10-cyrillic-italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/static/fonts/lora-v10-cyrillic-italic.svg#Lora') format('svg'); /* Legacy iOS */
  }
  /* lora-700 - cyrillic */
  @font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 700;
    src: url('/static/fonts/lora-v10-cyrillic-700.eot'); /* IE9 Compat Modes */
    src: local('Lora Bold'), local('Lora-Bold'),
         url('/static/fonts/lora-v10-cyrillic-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/static/fonts/lora-v10-cyrillic-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('/static/fonts/lora-v10-cyrillic-700.woff') format('woff'), /* Modern Browsers */
         url('/static/fonts/lora-v10-cyrillic-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/static/fonts/lora-v10-cyrillic-700.svg#Lora') format('svg'); /* Legacy iOS */
  }
  /* lora-700italic - cyrillic */
  @font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 700;
    src: url('/static/fonts/lora-v10-cyrillic-700italic.eot'); /* IE9 Compat Modes */
    src: local('Lora Bold Italic'), local('Lora-BoldItalic'),
         url('/static/fonts/lora-v10-cyrillic-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/static/fonts/lora-v10-cyrillic-700italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('/static/fonts/lora-v10-cyrillic-700italic.woff') format('woff'), /* Modern Browsers */
         url('/static/fonts/lora-v10-cyrillic-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/static/fonts/lora-v10-cyrillic-700italic.svg#Lora') format('svg'); /* Legacy iOS */
  }
  

3.Downloadしたファイルを、サーバーにUploadする

Downloadしたフォントファイルとcss とUploadすると時 Server 上でダウンロードしたフォントを使用可能です。
私の環境では、これでPageSpeed Insights の得点が3-4点ほどUPしました。

また、google webfonts helper には、WEB APIがあり、
curl で、zipファイルがダウンロード可能です。
サーバー上で、スクリプトを作成してスケジューラーに組み込めば、定期的にダウンロードして、
最新化することもできそうです。

curl -o fontfiles.zip "https://google-webfonts-helper.herokuapp.com/api/fonts/lato?download=zip&subsets=latin,latin-ext&variants=regular,700&formats=woff"

以上です。