メニュー 閉じる

WEBフォントの利用 Google Fonts編

ニコモジ

Last Updated on

ワードプレスのサイトでウエブフォントを使用

ウエブフォントとは、従来画像ファイルを表示する方法しか無かったデザイン性の高い文字や、デザイナーの意図するフォントを全てのパソコンで統一して表示するための新しい仕組みです。

説明が難しいですね(汗)

アイキャッチ画像の中の『カフェでコーヒー』という文字。
従来であれば、フォトショップなどで画像ファイルとして作成する必要がありました。
古いサイトだと見出し部分は全て画像!なんてサイトも存在します。

 

 

でも、それじゃサイトの作成に時間がかかるし文字の変更も大変!
さらにSEO対策的にも不利になります。

で、それらをすべて解決するのが『ウエブフォント』!
アイキャッチ画像の『カフェでコーヒー』は画像ではなく、文字をウエブフォントの『ニコモジ』で表示したものです。

 

で、表題のワードプレスでGoogle Fontsを利用する方法を記載します。

 

■Google Fonts を利用する。

無料で使えるウエブフォント『Google Fonts』『Google Fonts + 日本語早期アクセス』こちらをワードプレスで使用しましょう。

Google Fonts は英字のみ。日本語を利用したい場合は Google Fonts + 日本語早期アクセスを使用します。

 

Google Fonts

 

日本語フォント、まだ数が少ないですね。

こちらの中から Google Fonts を使ったことがわかりやすいように『はんなり明朝』を選択します。

 

はんなり

 

利用方法は、比較的簡単。

HTML をテーマヘッダーに書き加え、CSSで指定するだけです。

 

1. HTML をテーマヘッダー(header.php)の <head> 内に貼り付けます。

最新のワードプレスは、CSS編集が親テーマでも可能になったため、実はこのサイト子テーマをまだ作っていません。

今回はテーマヘッダーを編集する必要があるため、必ず子テーマを作成して作業を行いましょう。

参考:子テーマの作り方

はんなり明朝のページ右にある HTML を、子テーマのテーマヘッダーの <head> </head> の間に貼り付けます。

 

2. 必要部分のcssを編集します。

たとえばこのサイトの場合、見出しH2に下記の CSS を書き込んでいます。

ここにフォントファミリーの指定を加えます。

はんなり明朝のページ右にある CSS のダブルクォーテーション内を参考に記述します。

 

はんなり明朝を見出し2に適用したサイト見本

 

 

 

関連記事