TypekitでWordPressに素晴らしいタイポグラフィを追加する方法

デザイナーが自分のサイトで美しいカスタム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フォントを追加する方法

新しいカスタムWebフォントをWordPressブログに追加する最も簡単な方法は、WordPress Typekitプラグインを使用することです。

「Typekit Fonts for WordPress」プラグインをお勧めします。プラグインをインストールして有効化した後、「設定 » Typekitフォント」にアクセスしてプラグインを設定できます。

まず、以前に保存したJavaScriptコードをTypekit埋め込みコードフィールドに貼り付ける必要があります。その後、CSSセレクターを追加して、サイトのどこでフォントを使用したいかを指定できます。

上のスクリーンショットでは、フォントを h1.site-title CSSセレクターに追加しました。

WordPressテーマでは、要素ごとに異なるクラスが使用されている場合があります。これらのCSSクラスを見つけるには、Webブラウザの「要素をインスペクト」ツールを使用する必要があります。初心者向けのWordPress生成CSSチートシートも参照すると、開始に役立ちます。

これで完了です！この記事が、Typekitを使用してWordPressに優れたタイポグラフィを追加する方法を学ぶのに役立ったことを願っています。また、WordPressテーマにGoogle Webフォントを追加する方法に関するガイドも参照してください。

この記事が気に入った場合は、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。また、TwitterやFacebookでもフォローできます。