google web fontsのlocal化

閲覧数: 31(0)

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日】
カテゴリーIT閑話, 公開タグ, , ,
検索精度を高める
2020年11月1日

検索ネタを連発するのはElasticsearchやElasticPresがバージョンアップした時のお  続きを読む

ElasticPress日本語設定2020年版
blank
2020年10月29日

ElasticsearchをWordpressで利用するためのプラグインであるElasticPres  続きを読む

ElasticPress 3.5
blank
2020年10月22日

Elasticsearch用のプラグインであるElasticPressがメジャーバージョンアップ(3  続きを読む

Elasticsearch 6.8.11
blank
2020年10月2日

2017年末に「2.4.6」から「5.6.5」へバージョンアップして以来の大幅バージョンアップです。  続きを読む

パンくずリスト詳細
blank
2020年5月12日

テーマの「マイナーチェンジ」に伴って「パンくずリスト」の仕様を若干変更しました。一つ前のテーマではパ  続きを読む

カテゴリーを制限する
blank
2020年5月11日

過去に何度も書いた「カテゴリー制限」の話、元はと言えば初期に書かれた「非公開」の記事が原因です。トッ  続きを読む

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください