google fontsのlocal化

閲覧数: 35(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閑話, 公開タグ, , ,
タイトルを抜粋する

関連記事プラグインを使って、記事本文の下に「関連記事」を表示している。情報としては、タイトル、画像、  続きを読む

ページナビのテキスト
blank

記事ページの下部に前後の記事(投稿)へのリンクが表示される仕様なのだが、「カテゴリーに制限」をかけて  続きを読む

緊急事態宣言で外出自粛になり...
blank

せっかくのゴールデンウィークなのに、2年連続で緊急事態宣言下となり、外出自粛中。暇なので小ネタで遊ぶ  続きを読む

管理画面を制限する
blank

このサイトではネット上のさまざまな攻撃からの防御のため、Wordfenceプラグインの無料版を使用し  続きを読む

ElasticPress 3.5.6
blank

マイナーバージョンアップにも関わらず、検索スコアリングのパラメータが微調整された結果、期待する検索結  続きを読む

検索精度を高める
blank

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

スポンサーリンク

コメントを残す

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