Webフォントを利用する方法(Google Fontsの使い方)

Google Fontsの使い方アイキャッチ CSS

どの端末から見ても同じフォントスタイルで表示させることができるWEBフォント。Googleが無料で提供しているWEBフォント「Google Fonts」を設定する方法を紹介します。

ユーザーの端末環境によって表示されるフォントが変わる!

フォントはどのようにして選んでいますか?

「見やすいよう」「自分の好みで」など考慮してフォントを選んでも、実際は、Windows、Mac、Safari…ユーザーの使用OS環境によって、表示されるフォントタイプは変わってしまいます。思い通りのフォントを表示させたいと思っても、指定したフォントがインストールされていないOS環境では、利用可能なフォントに変換されて表示されます。

例えば、私は女性向けのやさしいイメージにしたいときに、「ロゴタイプゴシック」というフリーフォントを使用することがあるのですが

font-family: ’07ロゴたいぷゴシック7′, sans-serif;

と、このように記述しただけでは、ロゴタイプゴシッがインストールされていないPCでサイトを見た場合
OSによって思っているのとは違うフォントタイプが表示された例
このように意図したフォントとは違うタイプのフォントが表示されてしまいます。

WEBフォントなら誰にでも同じフォントで表示させることができる

全てのユーザーに同じフォントデザインで表示させたい!そんなときに活躍するのが、WEBフォントなのです。

webフォントを利用すると、ユーザーのOS環境にインストールされていないフォントでも、自分が指定したフォントどおりにテキストを表示させることができます。

WEBフォントを提供するサービスはいくつもありますが、中でもGoogleが提供するGoogle Fontsは認知度も高く、世界中で広く使用されています。
Google Fontsは商用利用もOKな無料サービスで、多くが欧文フォントのみですが、2018年6月現在、欧文フォントは877種類、日本語フォントは9種類用意されています。

Google Fontsの利用方法

⒈ Google Fontsのページを開きます。

Google Fontsのページはこちら

Google Fontsサイトのスクリーンショット

Google FontsのWEBサイトトップには、ズラリとフォントの一覧が表示されています。この中から使用したいフォントを見つけます。

⒉ 使用したいGoogle Fontsを絞り込みます。

すでに使用したいフォント名がわかっている場合は、右上にある検索窓に名前を入力すると、希望のフォントが表示されます。好きなフォントを探すための絞り込み検索は、検索ウィンドウ下のメニューを操作して行います。

  • Categories
  • 字体のタイプから搾ります。
    Serif(明朝体)、Sans Serif(ゴシック体)、Display(装飾文字)、Handwriting(手書き風)、Monospace(等幅文字)

  • Sorting
  • 表示順を変更します。
    Trending(トレンド)、Popular(人気順)、Date Added(新着順)、Alphabetical(アルファベット順)

  • Languages
  • 言語を選択します。残念ながら、2018年現在、こちらのページには日本語対応のフォントは用意されていません。※Google日本フォントは後述します。

  • Number of styles
  • 検索結果の表示数を指定します。

  • Thickness
  • 文字の太さを指定します。

  • Slant
  • 斜体を表示します。スライドを左右に動かして、斜体のきつさを調節します。

  • Width
  • 文字幅を指定します。

⒊ 絞り込んだフォントの表示イメージを確認します。

絞り込んだフォントを選定する前に表示したときのイメージを確認することができます。

Google Fontsのサンプル表示

  • Sentence
  • ボックス内に表示するサンプルを指定します。
    Sentence(文章)、Paragraph(段落)、Numerals(数字)、Custom(任意の文章を入力)

  • Regular 4…
  • 文字の太さや斜体のサンプルを表示します。
    ※ここに▼のタブがない場合は、そのフォントに太さのバリエーションや斜体がないことを意味します。

  • ●px
  • 表示サンプル文字の大きさを指定します。

  • SEE SPACIMEN
  • ボックス右下のボタンを押すと、選んだフォントサンプルのアルファベットや太字・斜体の一覧が確認できます。

⒋ 選定したフォントを選択します。

使用するフォントが決まれば、ボックス右上にある+ボタンをクリックします。
クリックすると、画面下に黒いタブが表示されます。

※フォントは複数選ぶことも可能です。複数利用する場合は全ての+ボタンを押して追加しますが、多く追加するとサイトの表示速度が遅くなるので、最小限にするようにしましょう。

選択完了後、画面下の黒いタブをクリックすると、いよいよHTML・CSSの記述内容が表示されたタブが開きます。

Google Fonts操作画面のスクリーンショット

黒いタブを開くと上の方に「Your Selection」とされ、選択したフォントが表示されています。-ボタンを押すと選択解除できるので、不要なフォントは削除してください。

⒌ 選定したフォントの記述をコピペして、自分のサイトファイルに貼り付けます。

Google Fontsをサイトに読み込ませるための埋め込み記述は、HTMLに書き込む方法とCSSに書き込む方法があります。

  • HTMLに記述する場合
  • Google Fonts記述(HTML)

    Embed Fontで「STANDARD」を選択します。
    表示されている<link href ~ >までの記述を自分のサイトのhtmlファイルの<head>タグの中にコピペします。
    あとは、通常のフォント指定同様に、CSSでGoogle Fontsを使いたいセレクタにタブ内にある「font-family」の記述を貼りつけます。

  • CSSに記述する場合
  • Google Fonts記述(CSS)

    Embed Fontで「@IMPORT」を選択します。
    表示されている<style>タグ内の@import url(‘https:// ~ ;までの記述を自分のサイトのcssファイルの開始タグ@charset 記述の下にコピペします。
    あとは、通常のフォント指定同様に、CSSでGoogle Fontsを使いたいセレクタにタブ内にある「font-family」の記述を貼りつけます。

Google日本語フォントの利用方法

Google日本語フォント専用サイトがある

Google日本語フォントのページはこちら

Google日本語フォントは、2018年現在、全部で9種類用意されています。

使用する方法は欧文用Google Fontsと同じで、HTMLファイルの<head>内に、埋め込み用の記述をコピペ。その後、CSSファイルの指定したいセレクタにfont-familyを指定するための記述を加えます。

Googleフォントのメリット・デメリット

Googleフォントを利用することで得られるメリットは

  • どの端末環境やOS環境でも同じフォントスタイルを表示させることができる
  • ロゴやサイト名なども画像ではなく、ユニーク+おしゃれなテキストで表示させることができる→SEO効果
  • 数字もおしゃれなフォントを使える

逆にGoogleフォントを使うデメリットもあります。

  • 大容量ファイルを外部から読み込むために、サイト表示速度が遅くなる
  • 日本語フォントは種類が少ない

せっかくおしゃれな表示になっても、サイト表示が遅くなってSEO的にも不利に働くことは避けたいですよね…。

Google Fontをはじめ、WEBフォントは極力最少限の利用におさめ、特に欧文フォントよりも格別に重い日本語フォントは、WEBフォントを避けるのが、現状おすすめのフォントの使い方です。

Comments