google fontsのlocal化
google fontsの使い方では「web fonts」の使い方を簡単に説明しました。結果的に以下のコードを「header.php」へ追加することで「google web fonts」をロード出来るようにしました。最近使っているのは「Libre Barcode 39 Text」です。
<link href='https://fonts.googleapis.com/css?family=Cabin+Sketch|Libre+Barcode+39+Text|Special+Elite' rel='stylesheet' type='text/css'>
確かに手軽に使えて便利なのですが、Googleの「PageSpeed」ではweb fontsのロード時間が採点のネックとなっており、今回はその解消を狙ってlocal化に取り組みました。ググると沢山の情報が出てきますが、最終的に参考にしたサイトは「こちら」残念ながら日本語ではありませんが、いくつか調べた日本語の情報では実現出来ませんでしたが、ここの情報でこのサイトは無事ローカル化出来ました。
基本的にはサイトの指示通りに実行しています。googleからttfフォントをダウンロードし、記載された変換サイトで必要なフォーマットへの変換とダウンロードを実施します。入手したフォントファイルを子テーマの「fonts」フォルダへアップロードし子テーマの「style.css」へフォントをロードする記述を追加します。テーマのカスタマイズから追加CSSに記載された「site-title」の指定フォントを今回ロードしたフォント名へ変更します。
@font-face { font-family: 'Barcode'; <--これがフォント名となる src: url('./fonts/LibreBarcode39Text-Regular.eot'); src: url('./fonts/LibreBarcode39Text-Regular.eot?#iefix') format('embedded-opentype'), url('./fonts/LibreBarcode39Text-Regular.woff2') format('woff2'), url('./fonts/LibreBarcode39Text-Regular.woff') format('woff'), url('./fonts/LibreBarcode39Text-Regular.ttf') format('truetype'), url('./fonts/LibreBarcode39Text-Regular.svg') format('svg'); font-weight: 400; font-style: normal; }
.site-title { margin: 0 0 30px; font-size: 82px; font-family: Barcode; <--style.cssでロードしたフォント名を指定する text-transform: uppercase; } .site-title a { text-decoration: none; } .site-title a:hover { text-decoration: none; color: #1FA0AE; }
せっかく頑張ってローカル化したのに「PageSpeed」は91/100で変わりませんでしたw
最終更新日: 2019年6月6日