WEBフォントの利用 Google Fonts編

ニコモジ

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

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

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

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

 

 

でも、それじゃサイトの作成に時間がかかるし文字の変更も大変!
さらに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に適用したサイト見本

 

 

 

この記事を書いたのは

白馬のおんじ
名古屋市の情報通信システム会社に勤務。生活の大半をブログ運営に捧げています(笑)WordPress や BiND を使用したサイト制作承ります!

"ZERO"で作るゼロ円ホームページ

レカムジャパン名古屋第一支店で作るホームページ。"ZERO"ならドメインの取得や管理にかかる初期費用も一切ゼロ。もちろん製作費も更新費用もかかりません。ホームページにかかる4つの費用を全てゼロにした名古屋第一支店だけのオールフリープラン"ZERO"。是非ご利用ください!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です