WordPressにカスタムフォントを簡単に追加する方法
公開: 2015-05-22コンピュータにフォントを追加するのは非常に簡単です。 ファイルをフォントディレクトリにダウンロードするだけで、選択したソフトウェアやアプリケーションでファイルを使用できるようになります。
ただし、Webサイトでカスタムフォントを使用する場合、特に訪問者がデバイスにインストールしていない可能性のある書体を使用する場合は、少し複雑になります。
ありがたいことに、WordPressユーザーとして、個々のフォントを追加したり、それらのライブラリ全体をWebサイトに追加したりするために使用できる優れた無料ツールがいくつかあります。 テーマでフォントを使用できるようにしたら、Webサイトで使用されているさまざまなスタイルにフォントを適用し始めることができます。
この記事では、高品質の無料およびプレミアムフォントを見つけることができる場所、WordPress Webサイトにそれらを追加する方法、およびWebサイトの各書体に適切な設定を選択するのに役立ついくつかのツールを紹介します。
あなたのウェブサイトのフォントを見つける場所
WordPress Webサイトにカスタムフォントを追加する方法について説明する前に、サイトのテキストの外観を変更するための新しい書体を見つけることができる場所をいくつか見てみましょう。
Webサイト全体で自由に使用できるオープンソースフォントを見つけることができる、いくつかの優れた無料のオンラインリソースが利用可能です。 あなたが探求したいと思うかもしれないいくつかのリソースは次のとおりです。
- Google Fonts：Web用に最適化された600を超えるオープンソースフォントを閲覧できます。 WordPress Webサイトでこれらのフォントを使用するのは非常に簡単です。これについては、後ほど説明します。
- Font Squirrel：自由に使用できるフォントのもう1つの大きなリポジトリ。
- Edge Web Fonts：AdobeTypekitを利用した無料のWebフォントのコレクション。
- Typekit：Webおよび印刷物で使用するための、アドビの4,000を超える無料およびプレミアムフォントのプロフェッショナルコレクション。
ご覧のとおり、WordPressWebサイトの外観をカスタマイズするために使用できる無料およびプレミアムフォントの合法的なオンラインソースがたくさんあります。
Webデザイナーのためのタイポグラフィツール
Webサイトに適したフォントのセットを選択するのは難しい場合があります。 プロセスには、好きなフォントを1つまたは2つ選択して、それらをWebサイトに追加するだけではありません。
フォントの外観だけでなく、選択するサイズ、サイトのコンテンツ領域の幅、各書体に最適な線の高さも考慮する必要があります。
ありがたいことに、選択したフォントを正しく適用するために使用できる無料のオンラインツールがいくつかあります。 これにより、コンテンツが最高に見えるようになります。
Webサイトのフォントをカスタマイズするときに必ず確認する必要のあるオンラインリソースの1つは、黄金比タイポグラフィ計算機です。 このタイポグラフィツールは、Thesis Frameworkの背後にいる人からのもので、フォントサイズを入力し、続いてコンテンツ領域の幅を入力できます。 次に、ツールは特定のWebサイト構成に最適な活字設定を計算します。
タイプスケールは、Webサイトのさまざまなテキストスタイルを相互に関連付けるサイズを簡単に設定できるもう1つのオンラインツールです。 サイトの段落テキストのサイズなど、基本フォントサイズを入力すると、さまざまな見出しのそれぞれに設定する必要のあるサイズがわかります。
上記の黄金比を含む、選択できるスケールがいくつかあります。 設定に満足したら、CSSをすばやくコピーして自分のWebサイトで使用できます。
WordPressカスタムフォントプラグイン
オンラインでフォントを見つける場所がたくさんあるように、WordPressのWebサイトにフォントを統合する方法もたくさんあります。 ただし、できるだけ早く開始できるように、WordPressフォント関連の最高のプラグインをいくつか紹介します。
簡単なGoogleFonts
Easy Google Fontsは、WordPressWebサイトのGoogleリポジトリにある600以上の無料フォントを使用できる無料のプラグインです。 プラグインはWordPressカスタマイザーツールで動作します。 これにより、サイトのどこでどのフォントを使用するかを最終的に決定する前に、変更をプレビューできます。
ウェブサイトにプラグインをインストールしてアクティブ化した後、現在のWordPressテーマで使用されているフォントの変更を開始できます。 これを行うには、WordPressカスタマイザーツールに移動し、タイポグラフィセクションをクリックします。
箱から出して、プラグインを使用すると、テーマで使用されているメインスタイルのタイポグラフィ設定を変更できます。 これには、段落と個々の見出しを含めることができます。 ただし、Easy Google Fonts設定ページから、カスタムフォントコントロールを作成できます。 これらはカスタマイザーインターフェイスに追加され、リストや引用符などの要素で使用されるフォントを簡単に変更できるようになります。
カスタムフォントコントロールを追加したら、カスタマイザーのテーマタイポグラフィ設定からアクセスできます。
プラグインのこの機能を使用することで、WordPressテーマの要素またはスタイルのいずれかで使用されるフォントを変更できます。 カスタマイザーに追加されるコントロールは、フォントの太さ、テキストの装飾、変換のプロパティ、およびフォントの色、背景色、サイズ、行の高さ、文字の間隔もカバーします。
カスタムフォントコントロールと提供されている詳細設定を組み合わせることで、Easy Google Fontsプラグインは、コードを直接編集することなく、WordPressWebサイトのテキストの外観を変更する際に可能性の全世界を開きます。
任意のフォントを使用
上記のEasyGoogleFontsプラグインを強くお勧めします。 ただし、欠点が1つあります。それは、GoogleFontsコレクションの書体しか使用できないことです。 これらの686フォントのいずれも魅力的でない場合、またはカスタム書体を使用したい場合は、同様に無料のUseAnyFontプラグインが適切な代替手段です。
プラグインをインストールしてアクティブ化した後、1つまたは複数のフォントをコンピューターから直接Webサイトにアップロードできます。 ただし、開始する前に、プラグインをフォント変換ツールに接続する無料のAPIキーにサインアップする（または寄付する）必要があります。
少なくとも1つのフォントをアップロードしたら、それをWebサイトの特定の要素に割り当てることができます。 これには、デフォルト要素のリストと、定義したカスタム要素が含まれます。
プラグインは、WordPress投稿エディターにいくつかのフォントコントロールも追加します。 これにより、投稿やページで使用されているフォントを、グローバルにではなく、個別に簡単に変更できます。
フォントを割り当てた後、Webサイトのフロントエンドにアクセスして、タイポグラフィの変更を確認できます。 このプラグインのコントロールは、Easy Google Fontsプラグインから提供されているものとは比較されませんが、テーマの特定の要素で使用されるフォントを選択したカスタムフォントに変更するだけの場合は、UseAnyFontを使用します。うまく仕事。
WordPress用のTypekitフォント
WordPressWebサイトでAdobeTypekitサービスの無料およびプレミアムフォントを使用する場合は、WordPressプラグイン用の無料のTypekitフォントが最適です。
このプラグインを使用すると、事前定義されたセレクターを使用するか、独自のカスタムCSSルールを追加できます。 これにより、Webサイトのどの部分をTypekitフォントでパーソナライズしたい場合でも、このプラグインを使用して自由にパーソナライズできます。
手作業でWordPressにカスタムフォントを追加する
何らかの理由で、上記の無料プラグインのいずれかを使用するというアイデアが魅力的でない場合は、WordPressWebサイトで使用されているフォントをいつでも手動で変更できます。 使用したいフォントがGoogleFontsリポジトリにある場合は、それをWebサイトに追加するのは非常に簡単です。
Google Webサイトでフォントを選択し、関連するコードをWebサイトのheadセクションとCSSスタイルシートにコピーするだけです。
ただし、選択したフォントがGoogle Fontsのようなリポジトリでホストされていない場合は、フォントにリンクするだけで、自分でフォントをホストする必要があります。 これにより、プロセスがわずかに変更され、フォントをサーバーにアップロードするなど、いくつかの追加手順が追加されます。
FTPソフトウェア、またはWebホストのコントロールパネルのファイルマネージャーツールを使用して、フォントファイルをアップロードできます。 フォントを専用のフォントディレクトリにアップロードすることをお勧めします。できれば、子テーマフォルダにアップロードして整理してください。
フォントファイルがサーバーに配置されたら、テーマのCSSスタイルシートファイルを開いて編集します。 これは、WordPress管理ダッシュボード内の[外観]>[エディター]画面から実行できます。
上記のCSSをスタイルシートに追加してフォントをロードしたら、それをそのCSSファイルの任意の場所で使用して、以下のようにテキストの外観を変更できます。
パフォーマンス上の理由から、可能であれば、GoogleFontsなどの外部フォントリポジトリへのリンクを試みる必要があります。 ただし、オンラインで使用するフォントが見つからない場合は、ファイルを自分でホストしてページ速度をいくらか犠牲にする必要があります。
結論
うまくいけば、カスタムフォントの場所と、WordPressサイトへのフォントの追加を開始する方法がわかったはずです。 Easy Google Fontsなどの無料のプラグインの1つを使用すると、Webサイトで使用されているフォントだけでなく、それらの書体の表示方法も変更できます。
WordPressカスタマイザーツールのおかげで、Webサイトのテキストの外観を簡単に変更できるようになりました。 これはすべて、ライブプレビューを備えた一連のビジュアルメニューを通じて行われます。
現在のテーマでサイトで使用するフォントをあまり制御できない場合は、上記の方法のいずれかを使用して、基になるCSSを自分で編集せずに、これらの変更を簡単に行うことができます。
お気に入りのフォントは何ですか？ Webサイトのどのタイポグラフィ設定を変更しますか？ フォント、タイポグラフィ、またはWordPress全般について質問がある場合は、以下のコメントで共有してください。