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日