WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

そもそもWebフォントって？

Webサイトをデザインする時に、画像で表示する部分とテキストで表示する部分を分けていきます。

画像で表示をする場合は、デザイナーさんのPCにインストールされているフォントを用途に応じて自由に使うことができるため、表現の幅が広がります。

対して、テキストで表示をする場合は、閲覧者のPCにインストールされているフォントを使用する必要があり、フォントがインストールされていないと見た目が変わってしまうことになります。

Webフォントは、Webサーバーからフォントを読み込んだり、フォントファイルをダウンロードして読み込むことで、画像のようにデザインされた状態でページに表示させることができます。

今回はGoogleが提供する日本語のWebフォントNoto Sans Japaneseの実装方法をご紹介いたします。

Google WebフォントNoto Sans Japaneseの使い方

Noto Sans Japaneseはとても簡単に実装することができます。

CSSファイルに下記の命令を記述するだけです。

指定

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

プロパティ

body {
	font-family: 'Noto Sans Japanese';
}

煩わしい設定は一切なく、外部からCSSを読み込みフォントスタイルを指定するだけなので簡単ですね。

実際にこのページでフォントを試してみました。

このフォントには6355語の漢字が含まれており、特殊文字以外はほぼ網羅しているようです。

また、中国語と韓国語も同梱されているので、使い勝手も良いと思いますよ。

まとめ

日本語のWebフォントは序々に普及しはじめているものの、海外程ではありません。
日本語自体の数が多く、どうしてもフォントのサイズが重たくなってしまうことも原因のひとつです。

しかし、フォントワークスやモリサワなどの大手が参入してきたことによって、そういった障壁がクリアされていくのではないかと思います。

• FONTPLUS｜フォントプラス（フォントワークス・モリサワetc）
• TypeSquare [タイプスクウェア]（モリサワ）
• WEBフォント｜アマナイメージズ

今まで画像で作っていたをテキスト化できるので、更新性は格段に増すと思います。

興味のある方はぜひ試してみてくださいね。