SWELLで最新版 Font Awesomeや GoogleFontを高速に使う方法

contents

最新版Font AwesomeやgoogleフォントをWordPress ローカルで高速に読み出す。

Blogでも普通にHTML書いてもやはりかっこいいアイコンは使いたい。

私のBLOGもアイコン使っています。

SWELLはアイコンを自前で用意してくれて高速に読み出せるのですが種類が限られてます。

そうなるとやっぱり使いたくなるのがFont Awesome。
ものすごい数のアイコンが使えます。

https://fontawesome.com/search?m=free ⇦ ちょっと見てみる？

(自動翻訳してると表示崩れるかも。)

そしてSWELLにはちゃんと Font Awesome のアイコンを高速に呼び出すための仕掛けも

作ってくれてあります。

簡単に試してみたい時はSWELLから呼び出して使用しても良いと思います。

こちらもSWELLに内蔵されてますので高速に読み出し可能です。

しかし最新版を試す時または SWELL内に用意されているFont Awesomeの中に希望するアイコンが無い場合にSWELLドキュメントにあるWEBからFONTを持ってくる方法だと

後述する Google FONTとかも同じですがこの方法だと

どうしても速度が遅くなります。

つまりBLOGの動作速度が少し犠牲になってしまうんです。

私はその昔もっと回線速度が遅かった時代に Font AwesomeやGoogle FONT を

ローカルにDLして快適に使っていた記憶がありますので

このブログにも適用してやろうと思います。

今後Font Awesomeのバージョンが上がったとしてもやる事は同じです。

必要なファイルの中身だけ入れ替えればいけると思います。

追記

2022/03/31 SWELL – ver. 2.6.0
アップデートで fontawesome 6にSWELL自体が対応しました。
以下記事ははfontawesome 6を使用してローカル読みをさせてますが
今後fontawesomeがさらにバージョン上がった場合に
こうすれば最新が使えるという理解でお読みになってください。
ver6使用目的なら現在はSWELL本体だけで設定が可能です。

但しPageSpeed Insights等で計測し限界までページの高速化を望む場合
FontAwesomeが使用するall.min.cssをロードする際のレンダリングブロックが
減点の対象になる点は留意の上使いましょう。
回避方法は私の知る限りでは「FontAwesomeを使用しない」です。

FONTに関わる高速化の意味は
https://mlabo.org/5930/#index_id11（別タブで開きます）に記載してますのでご参考に。

作業の実際の流れ

STEP

Font Awesomeの最新のアイコンデーターファイルを貰ってくる。

https://fontawesome.com/download

Free For Web をクリックして

fontawesome-free-6.0.0-web.zip

ダウンロードしておく。

STEP

落としてきたファイルを解凍

解凍すると fontawesome-free-6.0.0-web というディレクトリができているはずなので

ディレクトリの中を確認するとこんな感じ。

STEP

必要なディレクトリは２つだけ

webfonts と css

この２つをWordPressが動いているサーバーに

FTPなどでアップロードします。

レンタルサーバーがブラウザで動くFTPを用意してくれてあるなら

それでUPしてもOKです。

SSHとかでリモートでサーバーに入れる方はそっちで作業しても構いません。

わかりやすいようにWEB版のFTPの画面乗せてあります。

ドキュメントルート（index.php や .htaccess があるところ）直下に

fa というディレクトリを作成して（名前は任意でOKですがコピペしたいならそのままで）

その中にさらに css と webfonts （これは名前変更不可）

という名前でディレクトリを作成しておきます。

ドキュメントルートに対する各ディレクトリの相対位置は固定なので
同じような構成にしないと動かなくなるので注意。

WordPressと関係ないディレクトリも
ありますが無視してください

fa というディレクトリが作成する
ディレクトリです。

faの下に css と webfonts の名前で
ディレクトリを作成しておきます。
後述のGoogleFONTもいれるなら
ついでにQuicksand のディレクトリも作っておきます。

STEP

ディレクトリの準備ができたら

ローカルで解凍してあるファイルをそれぞれ所定のサーバー側の同名のディレクトリにアップロードしてください。

実際に必要なファイルは cssのディレクトリ内は all.min.css しか使いませんので
それ以外はアップロードしなくてもOKです。webfontsの中は全部UPしてください。

STEP

HTMLを追加します。

外観ー＞カスタマイズー＞高度な設定

<link rel="stylesheet" href="/fa/css/all.min.css">

この all.min.css内でフォントファイルの位置を ../webfonts で宣言しているので
かならず css ディレクトリとwebfonts ディレクトリは同位の位置関係にしておいてください。

STEP

実際の使用法

よくある使い方として

メニューにアイコン付きでカテゴリ表示。

実際の記入はこんな感じ

[icon class="fab fa-apple"]&nbsp;&nbsp;Computer

図では改行しちゃって見えますが

１行です。

Font Awesomeの使い方は
公式に詳しく書いてあります。

SWELL公式のFont Awesome説明

STEP

作業終了

高速にロード可能な最新のFont Awesomeを使い倒しましょうｗ
もうサイトは重くありません。

SWELL側の Font Awesome の設定は必ず「読み込まない」にしておいてください。
すでに直接ローカルから高速に読み込んでますのでSWELL側をONにする必要はありません。

Google Font を WordPress ローカルで高速に読み出す。

まぁヤルことは似たようなものなんですがこちらはフォントファイルなので
必要な宣言などが変わります。

今回は私がいつも使っている Quicksand で話を書きます。
SWELLのFONT指定で Noto Sans JP が宣言できるのは皆様もご存じかと思いますが
このNotoもGoogleFONTです。

STEP

Google FONT で Quicksandをダウンロードする

https://fonts.google.com/specimen/Quicksand?query=quicksand

上記のサイトいくとこんな感じね

なんでもいいので＋を押して右下に出現する Download all を押してダウンロードしてください。
ここでの＋ボタンは各FONTの種類の宣言を自動的に追加生成するだけですのでどれ押していただいても構いません。
今回はここで生成されるHTMLは使いませんのでなんでもいいです。

STEP

ローカルで解凍して中を確認

staticの中にある Quicksand-Regular.ttf を

先ほど作ったサーバーの中の /fa/Quicksand の中に

アップロードしてください。必要なファイルはこれだけです。

全部のサイズを使用したい場合はすべてのFONTファイルをUP。
オールサイズの宣言は本記事の最後に記載してあります。

STEP

SWELLの設定

外観ー＞カスタマイズー＞追加css

@font-face {
font-family:Quicksand;
font-display: swap;
src:url('/fa/Quicksand/Quicksand-Regular.ttf') format("truetype");
}
.c-widget__title.-side,.c-widget__title.-footer,.p-toc__ttl,.ttl{font-family:'Quicksand', "Hiragino Kaku Gothic ProN", sans-serif}
.c-widget__title.-side,.c-widget__title.-footer,.p-toc__ttl,.ttl{LETTER-SPACING:2px}
.c-widget__title.-side,.c-widget__title.-footer,.p-toc__ttl,.ttl{FONT-SIZE:20px}

上記を追加すると

サイドバーでのウィジェットのタイトル
フッター１、２、３のウィジェットのタイトル
ヘッダーに記述されているメニューの項目
（このBLOGならComputerとかBlogなどの文字）

がすべてQuicksandに変化します。

そしてローカル読みだから速いけど今回は読み込むファイル小さいから
そんなにかわらないかもねｗ

でもネットからデーター拾ってくるより
絶対に高速であるのは間違いない！

Quicksandを完全体で使いたい人は

ちゃんとLightからBoldまで使いたいなら以下を

外観ー＞カスタマイズー＞追加css に修正追加

但しサーバーの /fa/Quicksand/ のディレクトリに

ローカルで解凍したファイルの static ディレクトリの中身を

全部アップロードする事。

@font-face {
font-family:Quicksand;
font-display: swap;
font-weight: 300;
src:url('/fa/Quicksand/Quicksand-Light.ttf') format("truetype");
}
@font-face {
font-family:Quicksand;
font-display: swap;
font-weight: 400;
src:url('/fa/Quicksand/Quicksand-Regular.ttf') format("truetype");
}
@font-face {
font-family:Quicksand;
font-display: swap;
font-weight: 500;
src:url('/fa/Quicksand/Quicksand-Medium.ttf') format("truetype");
}
@font-face {
font-family:Quicksand;
font-display: swap;
font-weight: 600;
src:url('/fa/Quicksand/Quicksand-SemiBold.ttf') format("truetype");
}
@font-face {
font-family:Quicksand;
font-display: swap;
font-weight: 700;
src:url('/fa/Quicksand/Quicksand-Bold.ttf') format("truetype");
}

この記事を書いた人

makoto Blogger&YouTuber

サーバー管理者として17年ほど仕事でサーバー触ってました。
www,mail,dns,sql各鯖をすべてFreeBSDで運用してましたが現世ではかなりレアなタイプになるみたいですね笑

viやシェルスクリプトとかperlとかgccとかFreeBSDとか実はbashよりtcshが好きとか時々寝ぼけるのは
その名残でしょう。

今まで縁の下の力持ち的な他人のためにプログラムを書き他人のためにサーバー構築し他人のためにWEBサイトを創る的な世界から
自分の好きなことに集中できる環境は実に気持ち良いですね。
現役は引退済みなので難しいことはやりませんしやれません。

現在　ほぼ自由人。