WordPressフォント変更ガイド

·(編集済み)· / ·

閲覧

AI翻訳簡体中文日本語

主要な洞察

AI · GEN

WordPress全体フォント変更ガイド

はじめに

多くの場合、WordPressのデフォルトで呼び出されるフォントは表示が良くありません。そのような時は、テーマのデフォルトフォントを変更することで、希望する効果を得ることができます。

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

1つ目：直接呼び出し

この方法はCSSファイルを変更するだけで実現できます。一部のテーマにはカスタムCSSスタイルの設定が組み込まれており、WordPressもこの入り口を提供しています（管理画面->外観->カスタムCSS）。この場合、直接入力できます：

CodeBlock Loading...

上の例は、フォントをグローバルで優先的にSegio UIに置き換え、次にMicrosoft YaHei（微軟雅黒）に置き換えるものです。以下に読みやすいフォントをいくつか挙げますので、コード内のSegio UIとMicrosoft YaHeiを置き換えてご使用ください。

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

2つ目：プライベートフォントの呼び出し

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

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

その前に準備作業が必要です。フォントファイルは通常1つのフォーマットしかありませんが、さまざまなブラウザのニーズを満たすために、.ttf .eot .woff .woff2 .svgの5つのフォーマットに拡張する必要があります。

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

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

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

前に準備した5つのフォントフォーマットをすべてウェブサイトのフォルダ（例：/fontsフォルダ）にアップロードし、siyuan.ttf、siyuan.svgのように統一して名前を付けます。カスタムCSSスタイルに次のコードを入力します：

CodeBlock Loading...

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

2.Githubにアップロードして無料のjsDelivr CDNアクセラレーションを使用

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

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

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

いくつかのフォントの呼び出しリンクを添付します（Githubでホスティング、jsDelivrアクセラレーションサービスを使用）

AdobeCleanHanSC

CodeBlock Loading...

思源黑体

CodeBlock Loading...

筑紫A丸

CodeBlock Loading...

阿里巴巴普惠体3.0

CodeBlock Loading...

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

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

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

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

次に、基本設定->ホットリンク防止に入り、ドメインを追加します。空のReferを許可し、http(s)://を忘れずに追加してください。下の画像の通りです。

続いてCORSルールを設定し、ドメインを追加します。同様にhttp(s)://を追加する必要があり、許可するHeadersには*を入力します

次にカスタムCSSに行き、以下のコードを入力します：

CodeBlock Loading...

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

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

まとめ

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

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

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

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

WordPress全体フォント変更ガイド

はじめに

1つ目：直接呼び出し

CSS

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

CodeBlock Loading...

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

2つ目：プライベートフォントの呼び出し

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

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

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;
}

CodeBlock Loading...

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

2.Githubにアップロードして無料のjsDelivr CDNアクセラレーションを使用

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

いくつかのフォントの呼び出しリンクを添付します（Githubでホスティング、jsDelivrアクセラレーションサービスを使用）

AdobeCleanHanSC

CSS

@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;
}

CodeBlock Loading...

思源黑体

CSS

@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;
}

CodeBlock Loading...

筑紫A丸

CSS

@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;
}

CodeBlock Loading...

阿里巴巴普惠体3.0

CSS

@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;
}

CodeBlock Loading...

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

続いてCORSルールを設定し、ドメインを追加します。同様にhttp(s)://を追加する必要があり、許可するHeadersには*を入力します

次にカスタムCSSに行き、以下のコードを入力します：

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;
}

CodeBlock Loading...

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

まとめ

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

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