Webページを制作する際、機能だけではなくデザインにもこだわりたいと思う人は多いと思います。デザインの中でも工夫できるポイントはいくつもありますが、中でも必ずユーザーの目に入る文字「Webフォント」は重要なポイントです。
今回はデザインの際にぜひ活用したい「Google Fonts」の基本的な使い方についてご紹介します。もくじ
◆Web Fontsとは
データをサーバーから読み込んで、Webページに表示させるフォントのことを「Web Fonts」と言います。Web FontsはあらかじめWebサーバ上にインストールされており、インターネット上で配布されているフォントデータ自体を読み込んで利用します。どのデバイスから閲覧しても同じフォントで表示することができます。
一方、デバイスに依存し、環境によってフォントの表示が変わるものを「デバイスフォント」と言います。
◆Google Fontsとは
Google Fontsは、Google社から提供されている無料のWebフォントサービスです。
無料で商用利用も可能で、登録も必要ありません。
Google Fontsのメリットは、閲覧環境に左右されずに同じフォントを適用することができる点です。フォントの種類も非常に多く、デザイナーが意図するデザインでユーザーに閲覧してもらうことができ、他社と差別化を図ることもできます。また、自動翻訳や音声読み上げにも対応が可能で、SEOにも有益です。
ただしフォントの種類によっては有料のものもあり、場合によってはライセンスの規定が必要なものもあるので、使用の際には確認が必要です。
◆Google Fontsの利用方法
【Google Fonts】
https://fonts.google.com/
Google Fontsにアクセスしたら、まずは利用したいフォントを検索します。カテゴリー検索や、並び順、絞り込み検索などができるのでお気に入りのフォントを探しましょう。
利用したいフォントが決まったら右上にある「＋」マークをクリックし、選択したフォントのリストに追加します。複数のフォントを選択することができます。
全て選択が終わったら、リストの右端の「-」ボタンをクリックします。
次に「CUSTOMIZE」のタブをクリックします。ここで太字や斜体などのカスタマイズが行うことができます。
太字や斜体などが決定したら「CUSTOMIZE」の左隣にある「EMBED」というタブをクリックします。埋め込むコードが表示されるので、HTMLの場合は上段のコードを「」内にペーストした上でCSSは下段のコードを「font-family」ペーストすることで完了です。
◆まとめ
Webフォントを取り入れることで、デバイスに依存せずにユーザーに統一したイメージを訴求することができます。自分の作りたいページのイメージにぴったりのフォントをGoogle Fontsで探して、他社とは一味違った魅力的なページ作りに役立ててみてはいかがでしょうか。 フォーザウィンはIT業界で働く仲間を募集しています！ 経験、未経験は問いません。是非当社の採用情報をご覧ください。 採用情報を見る ＞