HOME　→　3 WordPress　→　04 運用とトラブル　→　
投稿日: 投稿者: tacsan

Font Awesomeを ローカル使用に変更する

WordPress Twenty Seventeen
PageSpeed Insights Webサイトの高速化
その-3
「ウェブフォント読み込み中のテキストの表示」対策
Font Awesomeを ローカル使用にする
 
PageSpeed Insightsの診断で、「ウェブフォント読み込み中のテキストの表示」が指摘される。この対策として、「Font Awesome」の使用を【 CDN 】から【 Local 】に変更することにした。
 
「ウェブフォント読み込み中のテキストの表示」の詳細には、<head>内に埋め込んだ【 CDN 】のURLが表示されている
 
以下、Font Awesomeを ローカル使用に変更した記録。
 

 

スポンサー リンク

 

 
 
 
 
 
1. 現行の環境
 
「Font Awesome」は、引用タグの装飾のために導入した。
「Font Awesome」は、引用タグの装飾のために導入した
 
メインサイトでは、メニューバーにアイコンを表示している。
メインサイトでは、メニューバーにアイコンを表示している
 
 
このために、
「Font Awesome」を【 CDN 】で使用中。
 
 
CDNのバージョンは【v5.6.1】で、次のlinkタグ「<link …」を、子テーマ header.php の <head>内の<meta …>というmetaタグの下に埋め込んでいる。
<!-- Font Awesomeを使う -->
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
 
 
参考：
 
 
 
2. PageSpeed Insightsでの診断
 
PageSpeed Insightsの診断で、「ウェブフォント読み込み中のテキストの表示」が指摘される。
PageSpeed Insightsの診断で、「ウェブフォント読み込み中のテキストの表示」が指摘される
 
「ウェブフォント読み込み中のテキストの表示」の詳細には、<head>内に埋め込んだ【 CDN 】のURLが表示されている。
「ウェブフォント読み込み中のテキストの表示」の詳細には、<head>内に埋め込んだ【 CDN 】のURLが表示されている
 
表示されているURLは、「Font Awesome」の【 CDN 】。
https://use.fontawesome.com/releases/v5.6.1/webfonts/fa-solid-900.woff2
 
 
 
3. Font Awesomeのローカル化
 
Font Awsomeのサイトから『fontawesome-free-5.11.2-web』をダウンロード。
 
使用していたバージョンは『5.6.1』だが、最新版は『5.11.2』だった。
 
Font Awsomeのサイトにアクセスし、「ダウンロード」をクリックする。
Font Awsomeのサイトにアクセスし、「ダウンロード」をクリックする
 
「Free for Web」をクリックする。
「Free for Web」をクリックする
 
こちらのサイトからだと、直接ダウンロードできる。
こちらのサイトからだと、直接ダウンロードできる
 
ダウンロードしたファイル「fontawesome-free-5.11.2-web.zip」を解凍する。
 
解凍されたファイル「fontawesome-free-5.11.2-web」の内容。
解凍されたファイル「fontawesome-free-5.11.2-web」の内容
 
【css】と【webfonts】フォルダを『twentyseventeen-child』にアップロード。
【css】と【webfonts】フォルダを『twentyseventeen-child』にアップロード
 
【css】は「all.min.css」のみで良い。
【css】は「all.min.css」のみで良い
 
子テーマ header.php の<head>内に埋め込んでいるCSSへの「linkタグ<link …」を、ローカルアドレスに変更。
<!-- Font Awesomeを使う -->
<link href="./wp-content/themes/twentyseventeen-child/css/all.min.css" rel="stylesheet">
 
 
 
4. 結果とまとめ
 
 
「all.min.css」の内容について。
「all.min.css」の中に3か所「font-display:auto;」が有る
@font-face{font-family:"Font Awesome 5 Brands";
font-style:normal;font-weight:normal;
font-display:auto;
src:url(../webfonts/fa-brands-400.eot);
---
@font-face{font-family:"Font Awesome 5 Free";
font-style:normal;font-weight:400;
font-display:auto;
src:url(../webfonts/fa-regular-400.eot);
---
@font-face{font-family:"Font Awesome 5 Free";
font-style:normal;font-weight:900;
font-display:auto;
src:url(../webfonts/fa-solid-900.eot);
---
これらを、「font-display:swap;」に変更すると、「ウェブフォント読み込み中のテキストの表示」に、警告が表示されなくなる。
 
 
「ウェブフォント読み込み中のテキストの表示」の詳細。
「ウェブフォント読み込み中のテキストの表示」の詳細
 
「Font Awesome」の【 CDN 】へのURLは消えた！。
 
但し、
①．crayon-syntax-highlighter のフォントへのURL。
②．Google Fontsの fonts.gstatic.com へのURL。
が残っている。
 
 
 
　PageSpeed Insights 【Webサイトの高速化】 対策
 
 
以上。
(2019.11.26)
 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

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