デザイナーが自分のサイトで美しいカスタム・ウェブ・フォントをどうやって使っているのか、不思議に思ったことはないだろうか。多くの場合、彼らは高品質のフォントを利用できるAdobeのサービス、Typekitを使ってWordPressにカスタムフォントを追加している。この投稿では、WordPressにTypekitフォントを追加してタイポグラフィを改善する方法を紹介します。
なぜTypekitフォントを使うのか？
Typekitは人気のあるサブスクリプションベースのフォントサービスで、コストを大幅に削減することができる。高額になりがちな個別のフォントライセンスを支払う代わりに、数百ものフォントを収録したライブラリ全体を無料または年間定額料金で利用することができます。
Typekitライブラリは、1,000を超えるフォントの膨大なコレクションだ。ウェブ上で見つけることができる最も美しいフォントのいくつかは、AdobeのサービスであるTypekitを通じて利用できる。
ベーシックな無料プランでは、230以上のフォントにアクセスでき、1つのサイトで2つのフォントファミリーを無料で使用できる。その他のプランは年間$49.99から$99.99まで。
これらの素晴らしいTypekitフォントは、ページの読み込み速度を低下させることなく、どんなサイトにも簡単に追加できる。フォントはAdobeのCDNから提供され、自分のサイトでホスティングサービスを利用するよりもはるかに速いスピードで読み込まれます。
WordPress用Typekit動画チュートリアル
動画がお気に召さない場合や、さらに詳しい説明が必要な場合は、以下をお読みください。
なぜWordPressでカスタマイザーを使うのか？
タイポグラフィはサイトのデザインにおいて重要な権限グループです。
適切なフォントを選ぶことで、読者にあなたの個性やメッセージを明確に伝えることができます。プロフェッショナル、フレンドリー、カジュアル、経験豊富など、どのようなイメージを表現したい場合でも、サイトのフォントは適切なイメージを映し出すのに役立ちます。
適切なフォントを使用することで、印象的な印象を残すことができます。ウェブ上の他のサイトと同じように見えるのではなく、あなたのテキストは明らかに違って見えるのです。WordPressサイトに適切なフォントを選択することで、あなたのサイトはシンプルなデザインから、美的感覚にあふれた見事な芸術作品へと生まれ変わります。
適切なカスタム・ウェブフォントには、次のような特長があります：
- コンバージョン率の向上
- サイトの直帰率を下げる
- サイト滞在時間の増加
- ユーザーの記憶に残る体験を生み出す
Typekitフォントを使い始める準備はできましたか？Typekitを使ってWordPressのデザインをカスタマイズする方法をご紹介します。
Typekitを使い始めるには
まず、Typekitのアカウントを作成する必要があります。Typekit.comで利用可能なプランを比較してください。
どのプランに登録するかを選択する必要があります。無料プランでは、利用できるサイトが1つに制限され、利用できるフォントも限られています。まずは無料プランでお試しいただき、その後アップグレードされることをお勧めします。アップグレードすることで、より多くのフォントライブラリが利用できるようになり、より多くのサイトで使用できるようになります。
次のステップはキットの作成です。キットを使用すると、サイトに必要なフォントと設定の特定のライブラリをまとめることができ、Typekitは必要なファイルとコードのみを読み込みます。キットを作成するには、サイト名とドメイン名を追加し、[続行]をクリックします。
キットの情報を入力し終わると、サイトに追加するためのJavaScriptコードが表示されます。このコードをメモ帳などのテキストエディターにコピー＆ペーストして保存してください。このチュートリアルの次のステップで、このコードをサイトに追加します。
とりあえず、フォントの選択を始めましょう。フォントライブラリをブラウズして、分類、ウェイト、幅、x-heightなどのオプションでフィルターをかけることができます。
気に入ったフォントが見つかったら、そのフォントをクリックして詳細や例を見ることができます。そのフォントをウェブキットに追加したい場合は、右側にある「ウェブ使用」をクリックします：右側にある「キットに追加」ボタンをクリックしてください。
ポップアップが表示されますので、作成したキットに選択したフォントを追加してください。
これで、キットに変更を保存するために公開するボタンをクリックすることができます。
これですべてです！これであなたのフォントキットは使用できるようになりました。
WordPressにTypekitフォントを追加する
WordPressブログに新しいカスタム・ウェブ・フォントを追加する最も簡単な方法は、WordPress Typekitプラグインを使用することです。
おすすめはTypekit Fonts for WordPressプラグインです。プラグインをインストールして有効化した後、設定 ” Typekit Fontsでプラグインを設定できます。
まず、先ほど保存したJavaScriptコードをTypekitの埋め込みコード欄に貼り付けます。その後、CSSセレクタを追加して、サイト上のフォントを使用する場所を指定します。
上のスクリーンショットでは、h1.site-titleCSSセレクタにフォントを追加しています。
WordPressのテーマによっては、要素ごとに異なるクラスを使用している場合があります。ウェブブラウザーのInspect Elementツールを使って、それらのCSSクラスを調べる必要があります。初心者のためのWordPress生成CSSチートシートも購入手続きの参考にしてください。
以上です！この投稿で、Typekitを使ってWordPressに素晴らしいタイポグラフィを追加する方法をご理解いただけたでしょうか。WordPress テーマに Google ウェブフォントを追加する方法については、こちらもご覧ください。
この投稿を気に入っていただけたなら、WordPressの動画チュートリアルをYouTubeチャンネルにご登録ください。Twitterや Facebookでもご覧いただけます。
Forest Antemesaris
This list worked for me, so thanks! But the italics aren’t true italics, but are oblique. Is there a way to make the italics true italics?
WPBeginner Support
It would depend on the specific font, you would want to reach out to Typekit’s support and they should be able to assist.
管理者
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
George Galbraith
Divi doesn’t support an easy way to add fonts to the inline text editor or dropdown. You’ll need to take the old fashioned route and still define your font size/weight/font for h1-h6/p in the css field in theme customizer.
Then us the tags to apply the fonts in the inline editor. Hope this helps!
Michael
Thank you for this great tutorial (and the excellent value you provide in general)! It will save me from having to use a plugin
I am wondering how to add the font to the in-liine editor and drop-down menus of my theme (DIVI) using Typekit and custom fonts (not Google).
Do you have any suggestions?
Cheers!