デザイナーが自分のサイトで美しいカスタムWebフォントを使用できることに疑問を持ったことはありますか？多くの場合、彼らはAdobeのサービスであるTypekitを使用してWordPressにカスタムフォントを追加しています。Typekitでは、高品質なフォントにアクセスできます。この記事では、WordPressにTypekitフォントを追加してタイポグラフィを改善する方法を説明します。
Typekitフォントを使用する理由
Typekitは、費用を大幅に節約できる人気のサブスクリプションベースのフォントサービスです。個々のフォントライセンスを購入すると非常に高額になる場合がありますが、Typekitでは、何百ものフォントのライブラリ全体に、無料または年間定額料金でアクセスできます。
Typekitライブラリは 1,000以上のフォントの巨大なコレクションです。ウェブ上で見つけられる最も美しいフォントのいくつかは、AdobeのサービスであるTypekitを通じて利用できます。
基本的な無料プランでは230以上のフォントにアクセスでき、1つのウェブサイトで2つのフォントファミリーを無料で利用できます。その他のプランは年間49.99ドルから99.99ドルです。
これらの素晴らしいTypekitフォントは、ページの読み込み速度を遅くすることなく、あらゆるウェブサイトに簡単に追加できます。フォントはAdobeのCDNから提供され、自分でサイトにホストするよりもはるかに高速に読み込まれます。
WordPress用Typekitビデオチュートリアル
動画が気に入らない場合や、さらに詳しい説明が必要な場合は、以下をお読みください。
WordPressでカスタムWebフォントを使用する理由
タイポグラフィは、サイトのデザインにおいて重要な役割を果たします。
適切なフォントを選択することで、読者にあなたの個性とメッセージを明確に伝えることができます。プロフェッショナル、フレンドリー、カジュアル、経験豊富など、どのようなイメージを伝えたいとしても、ウェブサイトのフォントはそのイメージを投影するのに役立ちます。
適切なフォントセットを使用することで、永続的な印象を残すことができます。ウェブ上の他のサイトと同じように見えるのではなく、あなたのテキストは明らかに異なって見えます。WordPressサイトに適切なフォントを選択することで、ウェブサイトをシンプルなデザインから美的で魅力的な芸術作品に変えることができます。
適切なカスタムウェブフォントは、次のことができます。
- コンバージョン率を上げる
- サイトの直帰率を下げる
- ウェブサイトでの滞在時間を増やす
- ユーザーにとって記憶に残る体験を創造する
Typekitフォントを使い始める準備はできましたか？Typekitを使用してWordPressのデザインをカスタマイズする方法を説明します。
Typekitの始め方
まず、Typekitアカウントを作成する必要があります。これを行うには、利用可能なプランを比較するためにTypekit.com にアクセスしてください。
登録したいプランを選択する必要があります。無料プランではウェブサイトは1つに制限され、利用できるフォントも限られています。まず無料プランで試してみて、後でアップグレードすることをお勧めします。アップグレードすると、より多くのフォントライブラリが利用でき、複数のウェブサイトで使用できるようになります。
次のステップはキットの作成です。キットを使用すると、ウェブサイトのフォントと設定の特定のライブラリをまとめることができ、Typekitは必要なファイルとコードのみを読み込みます。キットを作成するには、サイト名とドメイン名を追加してから、 続行をクリックします。
キットの情報をすべて入力し終えると、Typekitからサイトに追加するためのJavaScriptコードが提供されます。このコードは、メモ帳のようなテキストエディタにコピー＆ペーストして、一時的に保存できます。このチュートリアルの次のステップでサイトに追加します。
とりあえず、フォントの選択を始めることができます。フォントライブラリを閲覧し、分類、太さ、幅、xハイトなどのオプションでフィルタリングできます。
気に入ったフォントを見つけたら、クリックして詳細や例を確認できます。ウェブキットに追加したい場合は、右側にあるWeb Use: Add to Kitボタンをクリックしてください。
作成したキットに選択したフォントを追加する必要があるポップアップが表示されます。
これで、 公開ボタンをクリックして、キットへの変更を保存できます。
これで完了です！フォントキットが使用可能になりました。
WordPressでTypekitフォントを追加する方法
新しいカスタムウェブフォントをWordPressブログに追加する最も簡単な方法は、WordPress Typekitプラグインを使用することです。
Typekit Fonts for WordPressプラグインをお勧めします。プラグインをインストールして有効化した後、設定 » Typekit Fontsにアクセスしてプラグインを設定できます。
まず、以前保存したJavaScriptコードをTypekit埋め込みコードフィールドに貼り付けます。その後、CSSセレクター を追加して、サイトのどこにフォントを使用したいかを指定できます。
上のスクリーンショットでは、フォントを h1.site-title CSSセレクターに追加しました。
WordPressのテーマでは、要素ごとに異なるクラスが使用されている場合があります。それらのCSSクラスを見つけるには、ウェブブラウザの「要素を検証」ツールを使用する必要があります。また、初心者の方が始めやすいように、当社のWordPress生成CSSチートシートも参照することをお勧めします。
これで完了です！この記事が、Typekitを使用してWordPressに素晴らしいタイポグラフィを追加する方法を学ぶのに役立ったことを願っています。また、WordPressテーマにGoogle Webフォントを追加する方法に関するガイドも参照することをお勧めします。
この記事が気に入ったら、WordPress のビデオチュートリアルについては、YouTube チャンネルを購読してください。また、Twitter や Facebook でもフォローできます。
フォレスト・アンテメサリス
このリストは私にはうまくいきました、ありがとう！しかし、イタリック体は真のイタリック体ではなく、斜体です。イタリック体を真のイタリック体にする方法はありますか？
WPBeginnerサポート
特定のフォントによりますので、Typekitのサポートに問い合わせてみてください。彼らが対応してくれるはずです。
管理者
Jes
Same request here. I have installed the Typekit plugin and gone through all the processes to add fonts to my site, but the fonts are not available in the inline text editor and drop-down menu list
ジョージ・ガルブレイス
Diviは、インラインテキストエディタやドロップダウンにフォントを簡単に追加する方法をサポートしていません。従来の方法で、テーマカスタマイザーのCSSフィールドでh1-h6/pのフォントサイズ/ウェイト/フォントを定義する必要があります。
次に、インラインエディタでフォントを適用するためにタグを使用します。お役に立てば幸いです！
マイケル
Thank you for this great tutorial (and the excellent value you provide in general)! It will save me from having to use a plugin
Typekitとカスタムフォント（Google以外）を使用して、テーマ（DIVI）のインラインエディターとドロップダウンメニューにフォントを追加する方法を知りたいのですが。
何か提案はありますか？
Cheers!