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

https://fontawesome.com/download

Free For Web をクリックして

fontawesome-free-6.0.0-web.zip

ダウンロードしておく。

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

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

webfonts と css

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

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

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

それでUPしてもOKです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

外観ー＞カスタマイズー＞追加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}

上記を追加すると

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

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

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

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

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

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

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

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

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

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