Web フォントとハートブレイク・カフェ

Article
06/05/2011

前回のブログ記事でお伝えしたとおり、セッションで使用するデモ用に、HTML5 + CSS3 を使った架空の喫茶店のページを作成しております。

その喫茶店の名は「ハートブレイク・カフェ」。

店のコンセプトは、「傷ついた街の天使が羽根を休める….、ということはどうでも良くて、前回の記事から、このサンプルに使用している ”いまどきの” Web 技術について紹介しております。

今日は Web フォントについて書きたいと思います。

「ハートブレイク・カフェ」のロゴは、画像ではなく Web フォントの「Lobster」というフォントを指定して表示しています。

ちなみにこの「Lobster」というフォントは Windows には標準で含まれていませんが、Web フォントをサポートしている Web ブラウザーでアクセスすると、Windows はもちろん、Mac でも Linux でも「Lobster」フォントが正しく表示されます。(※ コーヒーカップの絵は画像ですよ。)

Web フォントとは

Web フォントは、クライアントにインストールされていないフォントであっても、Web からフォント提供することで、指定通りの字体の表示を行わせる技術で、CSS3 でサポートされています。(※)

フォントというと、ほとんどの場合機種依存であり、異なるプラットフォームで同じ文字を表示をさせるには、形状が似たフォントを指定するなどの工夫が必要でしたが、 Web フォントを使用すると、こういった面倒はありません。

(※) 実は、Web フォントは CSS3 以前から存在しており、以前より CSS の @font-face から使用することができました。機能自体の実装もけっこう早くて、Internet Explorer では 4 の時代からサポートしていました。Web フォントの指定は CSS2.1 で廃止されていましたが、後方互換のためか多くの Web ブラウザーで引き続き使用することができました。ただし、Web ブラウザー間でサポートされているフォントのフォーマットが異なったり、異なるドメインにあるフォントを使用できなかったりと、あまり実用的とは言えませんでした。

Web フォントのフォーマット

Webフォントのフォーマットとしては、以前から EOT（Embedded OpenType）、SVG（Scalable Vector Graphics）、SVGZ（gzip 圧縮されたSVG）、TrueType、OpenType などがありますが、今後標準として扱われるのは WOFF（Web Open Font Format) と言われています。

WOFF は、Mozilla Corporation や Type Supply、LettError など多くのフォントファンダリが共同で提案したウェブ専用の新しいフォントフォーマットであり、HTML5 対応をうたう最近 Web ブラウザーであればサポートされています。逆に、新しいフォーマットなので、ちよっと前の Web ブラウザーでは使用できません。

WOFF のフォーマットは、TrueType または OpenType フォントをテーブル単位で圧縮して、独自のヘッダーを追加した形式、ということで、TrueTyep Font から WOFF を生成するツールなんかも存在しますが、フォントの配布にはライセンスの問題も絡むと思うので、たとえば、個人でローカルにインストールしてあるお気に入りのフォントから WOFF を生成して Web で使用する際には、元になるフォントのライセンスを充分に確認したほうが良いでしょう。

また、Web には有償/.無償で公開されている Web フォントがいくつもあるので、それらを利用する方が面倒がなくて良いでしょう。

いかにいくつかのサイトを列挙します。

Google web fonts
https://www.google.com/webfonts

デコもじ
https://decomoji.jp/

Typekit
https://typekit.com/

Fonts.com Web Fonts
https://webfonts.fonts.com/

Fontspring
https://www.fontspring.com/

Font Me Up
https://fontmeup.com/

和文フリーフォント集
https://book.fontgraphic.jp/fontbloglist/49-woff.html

Web フォントの使い方

「ハートブレイク・カフェ」のロゴは、Google web fonts 提供の「Lobster」というフォントを使用しています。

使い方は非常に簡単で、以下のように <link> タグで Web フォントを指定して、CSS の font-family にフォント名を指定するだけです。

以下のサンプルでは、「Lobster」以外に「Wire One」と「Monofett」という Web フォントを使用しています。なお、href に google さんのサーバーを指定していますが、個別にフォントをダウンロード入手して使用することも可能なようです。(ここらへんは各フォントのライセンスを確認してください。)

<html >
<head>
<title>Web Fonts Test</title>

<link href="https://fonts.googleapis.com/css?family=Lobster&subset=latin" rel="stylesheet"
        type="text/css" />

<link href="https://fonts.googleapis.com/css?family=Wire One&subset=latin" rel="stylesheet"
        type="text/css" />

    <!—Monofett フォントの指定 -->
    <link href="https://fonts.googleapis.com/css?family=Monofett&subset=latin" rel="stylesheet"
        type="text/css" />
</head>
<body>
    <h1 style="font-family:Lobster">The HeartBreak Cafe*</h1>
    <h1 style="font-family:Wire One">The HeartBreak Cafe*</h1>
    <h1 style="font-family:Monofett">The HeartBreak Cafe*</h1>
</body>
</html>

( Web フォントを指定した HTML サンプル )

( 異なる Web フォントの指定で「The HeartBreake Cafe*」を表示したところ)

上記のように、いままでは画像で作成していたような、デザイン性の高いフォントも、Web フォントを使用すれば CSS の記述だけで行うことができ、HTML5 対応をうたう最新の Web ブラウザーであれば同じように表示されます。

フォントを変更するだけでも、ページの印象はまったく異なりますので、ぜひ使用してみてください。

そして、こういった最新の技術が当たり前に使用できるようになるよう、周りの方にも積極的に新しい Web ブラウザーの導入を奨めていただければと思います。

■

次回は radius について書きたいと思います。

Clicky

Web フォントとハートブレイク・カフェ

Additional resources