Umi Blog
ウミブログ
こんにちは。滋賀県にきて初めての梅雨、まっただ中です。カビが怖くて換気扇つけっぱなし…
そんな話はさておき、今日は先日個人的に触れる機会があったWebフォント、特にGoogle Fontsの話を書いていこうと思います。
Webフォント、気になるけど触ったことがない、名前は知っているけど実際どんなものか知らない、という方もいらっしゃるのではないでしょうか。
>“元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。”
（引用元：wikipedia）
Webフォントとはサイト上でデザイナーが意図したフォントを表示できる仕組みです。
普通であればユーザーのPCが持っているフォントをブラウザ上で表示しているのに対し、Webフォントを使用する際には、サーバー上に置いたフォントを指定して呼び出すことでデザイナーの意図したフォントを表示することができます。
さらに、Webフォント配信サービスを使えば、配信されている数多くのフォントをサイトのイメージに合わせて使うことができるのです。
つまり、これまで画像で表示させていた文字も、Webフォントを使用すれば画像なしで表示することができます。
しかも、表示されるも文字はテキストデータなので、ユーザがコピーすることもできます。
それでは実践ぽくなっていきますが、簡単に図を交えてもう少し詳しくご紹介していきます。
まずはGoogle Fontsのサイトに行ってみましょう。
次に、コードの記述です。今回は1番目と2番目の設定は置いておいて、3番目の設定を見ていただきたいと思います。
これで最後です！4番目の設定にある"font-family"プロパティをコピーして、あとは適用させたい要素にペーストします。
以上で終わりです！簡単ですね！
今回デモページをお見せすることはできませんでしたが、この手順を踏めば簡単に使えてしまいます。
便利なWebフォントですが、メリット・デメリットはもちろんあります。
まずメリット。
そしてデメリット。
やはりメリットデメリットはつきものですね。
いかがでしたしょうか。
Webフォントというだけで少し億劫に感じてしまう方もいらっしゃるかと思いますが、Google Web Fontsはたったの3ステップで使えてしまうんです！簡単便利！
ただし、Google Web Fontsは現在欧米フォントのみしか対応されていません。
ですが、日本語Webフォントを配信しているところもありますので、気になる方は探してみてはいかがでしょうか！
小さなご意見も、私たちにとっては大きなヒントです！
ぜひ率直なご感想をお寄せください
この
Masters of Drupal Engineering.
人に、
