Wordpress全局フォント変更ガイド

前言#

多くの場合、Wordpress のデフォルトで呼び出されるフォントは表示が良くないため、この時にテーマのデフォルトフォントを変更して、望ましい効果を得ることができます。

以下で紹介するフォントの変更は主に 2 つに分かれます。1 つ目はシステムのフォントを直接呼び出して、元のテーマのデフォルトフォントを置き換える方法です。2 つ目は外部のフォントファイルを使用してフォントを置き換える方法です。

第一種：直接呼び出し#

この方法は CSS ファイルを変更することで実現できます。一部のテーマにはカスタム CSS スタイルの設定が付属しており、Wordpress もこの入口を提供しています（管理画面 -> 外観 -> カスタム CSS）。この時、直接以下を入力できます：

*:not([class*="icon"]):not(i) {
font-family: Segoe UI, "Microsoft Yahei" !important;
}

上の例はフォントを全体的に優先的にSegio UIに置き換え、次に微软雅黑に置き換えています。以下に、読書に適したフォントをいくつか挙げますので、皆さんはSegio UIとMicrosoft YaHeiを置き換えるコードを使用してください。

宋体（SimSun）、微软雅黑（"Microsoft Yahei"）、华文黑体（STHeiti）
冬青黑体（Hiragino Sans GB）、苹方（PingFang SC）
Arial、Times New Roman、Droid Sans

第二種：私有フォント呼び出し#

私有フォントである以上、公共ライブラリから選択することはできず、どこかのサーバーにアップロードして読み込む必要があります。

ここで選択肢としては、1. ウェブサイトサーバーにアップロード 2.Github にアップロード（推奨）3. プライベートクラウドストレージにアップロードして呼び出すがあります。

その前に、準備作業を行う必要があります。フォントファイルは通常 1 種類の形式しかなく、異なるブラウザのニーズを満たすために、5 種類の形式に拡張する必要があります。それぞれ **.ttf .eot .woff .woff2 .svg** です。

検索すればオンライン変換ツールが見つかります。例えば：オンラインフォント変換

1. ウェブサイトサーバーにアップロード#

この方法にはリスクがあります。中国語フォントライブラリのサイズは通常非常に大きく、例えば現在使用している思源黒体は、1 つの ttf ファイルで 8M 以上あります。さらに、中国のサーバーは一般的に帯域幅が小さいため、ウェブサイトの読み込み時間が大幅に延びます。

前述の 5 種類のフォント形式をすべてウェブサイトのフォルダにアップロードします。例えば /fonts フォルダに置き、統一して命名します。例えば siyuan.ttf、siyuan.svg などです。
カスタム CSS スタイルに以下のコードを入力します：

@font-face {
font-family: '随便一个名称，需要和下面的保持对应';
src: url('../fonts/yourfont.eot');
src:
url('../fonts/yourfont.eot') format('embedded-opentype'),
url('../fonts/yourfont.woff2') format('woff2'),
url('../fonts/yourfont.woff') format('woff'),
url('../fonts/yourfont.ttf') format('truetype'),
url('../fonts/yourfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
*:not([class*="icon"]):not(i) {
font-family: "与上面起的名字的对应" !important;
}

この方法はあまり推奨されません。下記のクラウドストレージホスティングを使用することをお勧めします。

2.Github にアップロードして無料の jsDelivr CDN で加速#

jsDelivrがどれほど便利かについてはここでは多くを語りませんが、Githubの使い方についても詳しくは述べません。大まかな方法は、フォントファイルを Github の自分のリポジトリにアップロードし、jsDelivr が提供する加速サービスを使用して呼び出すことです。便利で使いやすく、しかも無料です。

jsDelivr の呼び出し形式は https://cdn.jsdelivr.net/gh/Github ユーザー名 / リポジトリ名 / 具体的なパスです。

svg ファイルはほとんどが 20M を超えるため、コメント欄の仲間が jsDelivr で 20M を超えるファイルを呼び出すとエラーが出ることを指摘しています。svg を他の方法で読み込むこともできますが、上記のままでも問題はありません。基本的には通常の使用に影響しません。

いくつかのフォントの呼び出しリンクを添付します（Github にホスティングされ、jsDelivr 加速サービスを使用）。

AdobeCleanHanSC#

@font-face {
font-family: 'AdobeCleanHanSC';
src: url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.eot');
src:
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.eot') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.ttf') format('truetype'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.svg') format('svg');
font-weight: 400;
font-style: normal;
font-display: swap;
}
*:not([class*="icon"]):not(i) {
font-family: "AdobeCleanHanSC" !important;
}

思源黒体#

@font-face {
font-family: 'siyuan';
src: url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.eot');
src:
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.eot') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.ttf') format('truetype'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.svg') format('svg');
font-weight: 400;
font-style: normal;
font-display: swap;
}
*:not([class*="icon"]):not(i) {
font-family: "siyuan" !important;
}

筑紫 A 丸#

@font-face {
font-family: 'AWan';
src: url ('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/Awan.eot');
src:
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.eot') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.ttf') format('truetype'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.svg') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
*:not ([class*="icon"]):not (i) {
font-family: "AWan" !important;
}

阿里巴バ普惠体 3.0#

@font-face {
font-family: 'AlibabaPuHuiTi';
src: url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/macos/AlibabaPuHuiTi/AlibabaPuHuiTi-3-55-Regular.eot');
src:
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/macos/AlibabaPuHuiTi/AlibabaPuHuiTi-3-55-Regular.eot') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/macos/AlibabaPuHuiTi/AlibabaPuHuiTi-3-55-Regular.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/macos/AlibabaPuHuiTi/AlibabaPuHuiTi-3-55-Regular.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/macos/AlibabaPuHuiTi/AlibabaPuHuiTi-3-55-Regular.ttf') format('truetype'),
font-style: normal;
font-display: swap;
}
*:not([class*="icon"]):not(i) {
font-family: "AlibabaPuHuiTi" !important;
}

3. クラウドストレージにアップロードして呼び出す#

個人サーバーにフォントファイルを保存する場合、サーバーはウェブページや画像などを読み込む際に、フォントの読み込みを待つ必要がありますが、クラウドストレージを使用すれば、ウェブサイトの読み込みが遅くなる問題を大幅に解決できます。

クラウドサービスには多くの選択肢があります。もしあなたのウェブサイトがまだ HTTPS を有効にしていない場合は、無料の七牛クラウドストレージを使用できます。HTTPS を有効にしている場合は、無料の又拍云ストレージまたは有料の阿里云 OSSを申請して使用できます。以下に阿里云 OSS と又拍云クラウドストレージの例を示します。

まず、先に準備した 4 種類のフォントファイルをクラウドストレージにアップロードします。クラウドストレージは公開読み取り権限に設定する必要があります。

次に、基本設定 -> 盗用防止に入り、あなたのドメインを追加し、空の Refer を許可します。http (s):// を忘れずに追加してください。以下の図のように。

次に、クロスオリジンルールを設定し、あなたのドメインを追加します。同様に http (s):// を追加し、許可する Headers には* を記入します。

次にカスタム CSS に移り、以下のコードを記入します：

@font-face {
font-family: '随便一个名称，需要和下面的保持对应';
src: url('../fonts/yourfont.eot');
src:
url('../fonts/yourfont.eot') format('embedded-opentype'),
url('../fonts/yourfont.woff2') format('woff2'),
url('../fonts/yourfont.woff') format('woff'),
url('../fonts/yourfont.ttf') format('truetype'),
url('../fonts/yourfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
*:not([class*="icon"]):not(i) {
font-family: "与上面起的名字的对应" !important;
}

又拍云については、クラウドストレージの設定が完了した後、FTP ツールを使用してクラウドストレージにログインし、アップロードした後、ファイルの URL アドレスを使用して利用できます。

又拍云のクラウドストレージ接続方法については公式ドキュメントを参照してください：ファイル管理ガイド - 又拍云ストレージ

総括#

現在、完全なフォントライブラリがまだ存在しないため、2 つ目の方法が比較的多く使用されると思われます。

もしあなたのサーバーの帯域幅が十分に大きいか、CDN 加速を有効にしていて、資金に余裕がある場合は、フォントファイルをウェブサイトのサーバーに置くことに問題はありませんが、そうでない場合は、クラウドストレージを使用してウェブサイトが巨大なフォントライブラリを読み込むのを助けることをお勧めします。

P.S.「字蛛」というプログラムがあり、ウェブサイトのフォントサイズを縮小することができますが、試してみたところ成功しませんでした。皆さんもこの方向で研究してみてください。

更新：字蛛は静的 HTML のフォントサイズ圧縮のみをサポートしているため、Wordpress では直接使用できません。