Webフォントとは、インターネット上にたくさん存在するフォントを、Webサイト上で表示する技術です。数あるフォントから適切なフォントを選ぶことができるので、Webサイトのデザインの幅が一気に広がります。日本語対応が少なかったことから、国内ではあまり注目されることのなかったWebフォントですが、実はとても簡単に使うことができます。今回は入門編として、Google fontsを例に使い方をご紹介します。
Webフォントとは？
一言で説明すると、Webサイト上でフォントを表示する技術です。Webフォントを使えば、ユーザーがフォントを持っていなくても、多種多様なフォントを使ったデザイン性の高いサイトを届けることできます。
以前までウェブで表示される文字は、ユーザーの使うPCにダウンロードされているフォントに依存して表示されていました。そこでWebサーバー上にフォントファイルを置いて、デザイナーの意図するフォントを表示できるようにした技術がWebフォントです。
あまり今までピックアップされることのなかったので難しいと思われがちなWebフォントですが、実は簡単にHTMLに組み込むことができます。
Webフォントの魅力
和文フォントが増えてきたことで国内でも徐々に使用例が増えたきたWebフォントですが、Webフォントを使うメリットは色々あります。何よりも大きなメリットは、デザイン性を高めることができるという点です。
デザイン経験のある方ならば、フォントを自在に選べることがどれだけ重要かはお分かりいただけると思います。数あるサイトとの強力な差別化ができるので、ユーザーの印象に残りやすいサイトを作ることができます。見栄えの良さは、伝わりやすさに直結します。
Webフォントを使ってみよう
１．Google Fontsを使う
webフォントには自分でダウンロードしたデータを組み込む方法もあるのですが、今回は比較的簡単にできるGoogle Fontsでご紹介します。「こちら」からGoogle Fontsへ移動します。
見本の一覧が出ているので、ここから欲しいフォントを探します。フォントが見つかったら、各フォントの右上にある「+」ボタンをクリックしてください。
図では左上のフォントを追加したので、記号が「-」になっています。
追加すると、下に黒いバーが出るのでクリックします。クリックすると以下の図のようなものが表示されると思います。
２．HTMLに組み込む
「STANDARD」をクリックし、灰色の枠に書かれたコードをコピーしてHTMLに組み込みます。
実際に組み込む際はHTMLでは<head>タグの中に
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
をペーストして組み込みましょう。
３．CSSに組み込む
先程の図の、「Specify in CSS」の欄に出ているコードを組み込みます。表示したい領域に
body{font-family: 'Roboto', sans-serif;
}
のように組み込んでください。
和文フォント
日本語は、英語に比べて使用する文字が膨大なので、デザインに時間を要し、大容量になってしまいます。そのため、和文に対応しているWebフォントの数は現在でも多くありません。
ですがGoogle Fontsからも、実験的に９つのフォントが提供されています。数は少ないですが、はんなり明朝やNoto Sans Japaneseなど、有名なフォントを無料で使うことができます。
まとめ
今回はWebフォントの基礎編として、シンプルに扱えるGoogle Fontsでの使い方をご紹介してみました。この他にも、数多くのフォントが提供・販売されています。HTML、CSSにペーストして組み込むだけで簡単に使えますので、いろいろな場面で活用できそうですね。より読みやすく、洗練されたデザインを作り上げてみましょう。
