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


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

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


参考サイト


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

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

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


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

1.TOP ページ

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

2.Download ページ

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

  • Select styles
    ダウンロードするfont-style を選択可能です。1
    [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"

以上です。

コメント