Menu/Prof
翻訳
スズキマコト
自由人
元々は楽器屋のギター兄ちゃん。
趣味でプログラミングしてるうちに
本職になってしまった人。

過去に喋っていた言語
c pascal Assembler
perl PHP Python Ruby など
javascriptなどは都度必要に応じて。
最近Mac買ったのでswift勉強してます。

体ぶっ壊して死にかけたので人生RESET中。
\ ポイント最大10倍! /

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
必要なディレクトリは2つだけ

webfonts と css

この2つを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

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

1行です。

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

SWELL公式のFont Awesome説明

STEP
作業終了

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

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}

上記を追加すると

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

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

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

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

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");
}
シェアしてくれると喜びます
  • URLをコピーしました!
  • URLをコピーしました!
contents