Google Web Fontsを使って簡単にWEBフォントを使う方法

公開日 : 最終更新日 :

カテゴリー :

普段ブラウザで見ているフォントは、PCにインストールされているフォントを使って表示しています。なのでCSSの「font-family」を使うときに使用できるフォントが限られています。そこでWEBフォントというCSSで書かれているものを使ってブラウザにインストールされているフォントの有無を問わずに好きなフォントを表示できるサービスがあります。WEBフォントは、英語圏ではかなりメジャーなものらしくたくさんサービスがあるそうです。その中でもGoogle Web Fontsは日本語が収録されていませんが、英語を中心に500種類以上のWEBフォントが収録されています。今回は、Google Web Fontsで提供されているWEBフォントを使う方法を紹介します。Googleが提供しているサービスなのでもちろん無料で使えます。

Google Web Fontsの使い方

まずはGoogle Web Fontsで使いたいフォントを選びます。

  1. Google Web Fontsにアクセス
  2. 使いたいフォントを選ぶ
    web-fonts1
  3. 使いたいフォントを選んだら「Quick-use」リンクをクリック
    web-fonts2
  4. 「3. Add this code to your website:」にあるコードをコピーする
    web-fonts3
  5. 「4. Integrate the fonts into your CSS:」のfont-familyのコードをコピーする
  6. 完了

Bloggerに適用する方法

これでGoogle Web Fonts側は完了です。次にコピーしたコードを自分のサイトやブログに貼り付けます。例は、Bloggerに適用する方法です。

  1. 「テンプレート」→「HTMLの編集」ボタンをクリック
  2. 「続行」ボタンをクリック
  3. <head>から<b:skin>の間にGoogle Web Fontsで取得した「3. Add this code to your website:」のコードを貼り付ける
  4. 取得したフォントを使いたいところに「4. Integrate the fonts into your CSS:」のコードを貼り付ける
  5. 「保存」ボタンをクリック
  6. 完了

まとめ

今回は、日本語が収録されていないGoogle Web Fontsで行いました。WEBフォントは英語だけではなく日本語もあります。しかし、日本語のWEBフォントは、あまり数が多くありません。なぜなら日本語は英語に比べて文字の数が格段に多くCSSのリクエストが多くなりサーバーのレスポンスに影響するからでしょう。日本語が収録されているWEBフォントを取り扱っているサイトを下に紹介します。紹介しているサイトは一部無料ですが、基本全部有料になります。

日本語も使えるWEBフォント提供サービス

ピンバック

コメント

名前とEメールアドレスが必須です。

以下のHTMLタグが使用できます。 <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>