8.1 ウェブフォントによるサイト名の表示

ウェブフォントとは

ウェブフォントとは、あらかじめサーバー上にアップロードしてあるフォントや、インターネット上で提供されているフォントを呼び出して表示する技術です。CSS3から対応となりました。

従来の方法の場合、CSS の font-family プロパティでフォントを指定できます。閲覧者側では、端末にインストールされているフォントの中から、サイトが指定するものを探して文字を表示するという仕組みが一般的でした。

しかしこの方法では、サイト制作者の指定したフォントが閲覧者の端末にインストールされていない場合に、別のフォントで代用されてしまうため、端末によってサイト作成者が意図しない見え方になってしまう問題がありました。従来は、画像を使って表現するといった方法でしかこの問題を解決できませんでした。

サイトが指定するフォントを持っていないと、別のフォントに置き換わってしまう。

しかしウェブフォントを使えば、ネット上にあるフォントをダウンロードして文字を表示するため、どの端末で見ても制作サイドが意図したフォントで表示できます。

ウェブフォントのサーバーが必要なフォントを提供してくれる。

Google Fonts は、Googleが提供している完全無料のウェブフォントサービスで、導入手順も比較的簡単であり、初心者でも使いやすいサービスです。詳しい使い方については検索して調べてみましょう。

Google Fonts 公式サイト

とりあえず使ってみるなら、下の手順書の通り進めると Google Fonts を利用できます。

ウェブフォントを使う準備をする

ここでは Google Fonts の「Paytone One」というウェブフォントを使ってサイトのタイトルロゴを表示することにします。

次のように<head>～</head>の範囲内に<link>を追加します。これでウェブフォントを使用できる準備が整います。

<!DOCTYPE html> <html lang="ja">

<body> ・・省略・・

なお<link>を設定しただけでは、サイト名の文字は変化しません。次に進みます。

まだ変化はありません。

ウェブフォントを使用する

サイト名の文字に対してウェブフォントを使用する設定を行います。

<header>内の<h1>に font-family で「'Paytone One'」を設定します。また、カンマ区切りで「sans-serif」も設定し、万が一ウェブフォントが読み込めなかった場合にはゴシック系(sans-serif)のフォントで表示するようにします。

さらに、フォントが一回り太く見えるので、<h1>の font-weightを「normal」に設定します。

/* サイトタイトル */
header h1 a {color: #444444;
             text-decoration:none; }

header h1 {margin:0;
           font-size:30px;
           font-family: 'Paytone One',sans-serif;
           font-weight: normal; }

・・省略・・

ウェブフォントが適用されました。
タイトルロゴのフォントが変わり、
少し丸いデザインになっています。

色を変更する

サイトタイトルの文字色が濃いので、少し薄くします。

ナビゲーションメニューの色合いに合わせて、<a>の color を「#88aaaa」に変更します。

/* サイトタイトル */
header h1 a {color: #88aaaa;
             text-decoration:none; }

header h1 {margin:0;
           font-size:30px;
           font-family: 'Paytone One',sans-serif;
           font-weight: normal; }

・・省略・・

タイトルロゴの色が変わりました。
メニューにマッチした色調になりました。

このようにウェブフォントは、通常の文字と同じように、スタイルシートを使って調整できます。