Google Font APIを使う

ブログのデザインを変更したのでついでにGoogle Font APIを利用してみました。スタイルシートを読み込んで利用するだけなので簡単に導入できます。

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=フォント名">
    <style>
      body {
        font-family: 'フォント名';
      }
    </style>
  </head>
  <body>
    <h1>Making the Web Beautiful!</h1>
  </body>
</html>

上記のように外部スタイルシートを読み込む時に「?family=フォント名」を記述し、スタイルシートで読み込んだフォントを指定するだけです。

複数のフォントを読み込みたい場合は「?family=フォント名1|フォント名2」とフォント名を「|」で区切って指定します。

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=フォント名1|フォント名2">

利用できるフォントの一覧は「Google Web Fonts」に掲載されています。

日本語対応のフォントは用意されていないのですが、軽いのでちょこっと英語を利用する場所があれば気軽に利用してみてもいいかもしれません。(ちなみにこのブログのサイドバーとコピーライトの部分に利用しています。)

Google Font API – Google Code