WordPressにカスタムフォントを追加したいですか？カスタムフォントを使用すると、ウェブサイト上でさまざまなフォントを美しく組み合わせて使用し、タイポグラフィとユーザー体験を向上させることができます。カスタムフォントは見た目の美しさだけでなく、読みやすさの向上、ブランドアイデンティティの確立、WordPressサイトでのユーザーの滞在時間の増加にも役立ちます。
この記事では グーグルフォントそしてタイプキット 歌で応える フォントフェイス メソッドを使ってWordPressにカスタムフォントを追加することができます。
WordPressにカスタムフォントを追加する
注目してほしい：多くのフォントを読み込むと、ウェブサイトが遅くなることがあります。.2つのフォントを選び、サイトに使用することをお勧めします。また、サイトを遅くすることなくフォントを正しく読み込む方法もご紹介します。
WordPressでカスタムフォントを追加する方法の前に、使用できるカスタムフォントを見つける方法を見てみましょう。
WordPressで使用するカスタムフォントを見つける方法
最近では、Google Fonts、Typekit、FontSquirrel、fonts.comなど、素晴らしい無料のウェブフォントを見つけられる場所がたくさんある。
Google FontsからWordPressにカスタムフォントを追加する
Google Fontsは、ウェブ開発者の間で最大かつ無料で、最も一般的に使用されているフォントライブラリです。WordPressでGoogle Fontsを追加して使用する方法はたくさんあります。
方法1：WordPressプラグインでGoogleフォントを追加する
Googleフォントをウェブサイトに追加して使いたいのであれば、この方法が最も簡単で、初心者におすすめです。
- プラグインのインストール::
- インストールとアクティベーション グーグルフォント タイポグラフィ プラグイン。
- プラグインの設定::
- 有効化したら、メールアドレスを入力して公式クイックスタートガイドを受け取ってください。次に、管理画面のサイドバーにある「Font Plugins → Custom Fonts」をクリックします。自動的にWordPressテーマカスタマイザーに移動し、新しい"フォント・プラグイン「パート
- フォント選択::
- 基本設定]セクションで、サイトのデフォルトフォントを選択し、[詳細設定]で、サイトの特定の部分のフォントを選択します。
- フォントファミリー」ドロップダウンメニューを使って、新しいフォントを選択します。プレビューは自動的にフォント効果を表示するように変更されます。
- ポスティングの変更::
- カスタムフォントの選択に満足したら、" をクリックします。ポスト"ボタンをクリックして変更を保存します。
方法2：WordPressでGoogleフォントを手動で追加する
この方法では、WordPressのテーマファイルにコードを追加する必要がある。
- フォント選択::
- Google Fontsライブラリにアクセスし、使用したいフォントを選択します。フォントの下にある「クイック使用」ボタンをクリックし、使用したいスタイルを選択して埋め込みコードをコピーします。
- コードを追加::
- のテーマを編集する。
ヘッダ.phpファイルにコードを貼り付けます。<body>ラベリングやWPCodeプラグインを使用する前に、埋め込みコードを "Header "ボックスに貼り付け、"Save Changes "をクリックしてください。
- のテーマを編集する。
- フォントの使用::
- 例えば、テーマのスタイルシートでこのフォントを使用する：
.site-title { font-family: 'Open Sans', Arial, sans-serif; }.Typekitを使ってWordPressにカスタムフォントを追加する
Adobe Fontsが提供するTypekitもまた、デザインプロジェクトで使用できる優れたフォントを提供する無料の高品質リソースだ。
- アカウント登録::
- Adobe Fontsアカウントに登録し、Browse Fontsセクションにアクセスします。フォントを選択し、プロジェクトを作成し、プロジェクトIDと埋め込みコードをコピーします。
- コードを追加::
- のテーマを編集する。
ヘッダ.phpファイルにコードを貼り付けます。<body>ラベリングやWPCodeプラグインを使用する前に、埋め込みコードを "Header "ボックスに貼り付け、"Save Changes "をクリックしてください。
- のテーマを編集する。
- フォントの使用::
- 選択したTypekitフォントをテーマのスタイルシートで使用する：
.site-title { font-family: 'gilbert', sans-serif; }.CSSの@font-faceを使ってWordPressにカスタムフォントを追加する
WordPressにカスタムフォントを追加する最も簡単な方法は、CSSを使って@font-faceフォントを追加することです。
- フォントのダウンロード::
- お気に入りのフォントをウェブ形式でダウンロードできます。適切な Web フォーマットがない場合は、FontSquirrel Webfont Generator を使用して変換できます。
- フォントのアップロード::
- フォントをWordPressホスティングサーバーにアップロードします。推奨される場所は、テーマまたは子テーマディレクトリ内の新しい「fonts」フォルダです。
- フォントの読み込み::
- テーマのスタイルシートにフォントを読み込むには、CSSの@font-faceルールを使います：
<フォントフェイス { font-family: 'Arvo'; src: url('http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf'); font-weight: normal; }.- フォントの使用::
- このフォントは、例えばテーマ・スタイルシート内の任意の場所で使用してください：
.site-title { font-family: 'Arvo', Arial, sans-serif; }.CSSの@font-faceを使ってフォントを直接読み込むことは、必ずしも最善の解決策とは限りません。例えば グーグルフォント もしかしたら タイプキット フォントを使用する場合は、そのサーバーから直接フォントを提供するのが最良のパフォーマンスです。
評決を下す
カスタムフォントを追加すると、WordPressサイトの視覚的な外観とユーザーエクスペリエンスが劇的に向上します。フォントは、Google Fonts、Typekit、CSS@font-faceを使用して簡単にパーソナライズできます。
| お問い合わせ |
|---|
| 記事が読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！ |
| ① 電話：020-2206-9892 |
| ② QQ咨询：1025174874 |
| 三 Eメール：info@361sale.com |
| ④ 勤務時間：月～金、9:30～18:30、祝日休み |
