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年5月12日

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

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

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

マイナーチェンジ
blank
2020年3月23日

かれこれ一年近くほったらかしだったので、気合をいれて「テーマ変更」と思っていたのですが、、、いろいろ  続きを読む

6月の検索ワードまとめ
blank
2019年6月30日

6月の検索ワードのまとめです。 意外なところで「zabbixダウングレード」が複数回検索され、単独の  続きを読む

アクセシビリティ対策
blank
2019年6月23日

テーマカスタマイズの一環で、トップページに一覧表示されている「写真を左右交互に表示する」ようにした際  続きを読む

dockerとproxy
blank
2019年6月18日

dockerやdocker-composeをプロキシ環境下で使うのに苦労したので忘れないようにメモし  続きを読む

コメントを残す

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