»webサイトでフォントを自由に!手軽にフォントが設定できる「Google web font API Beta」
ロゴや強調表示等いちいち画像を作るのは結構な手間ですよね！そんな時に役立つのが「Google web font Beta」。
ユーザーさんのローカル環境に左右されずに、いろいろなフォントを利用できます。
現状は日本語フォントの提供はないのですが、今後でてくるかも？
まずはじめに
Google web font Beta へアクセスしてみてください。
フォントの選び方
上記リンク先の中盤にある「Google web font API Beta」には使い方が、「Google web font Beta」にはフォントの一覧が載っていますので、まずは「Google web font Beta」を覗いてみましょう。
「start choosing fonts」をクリックして、フォントの一覧を表示させます。
「Preview Text:」の部分に表示させてみたい文字列を記入するとあら不思議、フォント一覧の文字列が「Preview Text:」の文字列に変更されます。上の方にあるタブの「Word」「Sentence」「Paragraph」を選択することで様々な場面のテキストをプレビューできます。
使い方
利用したいフォントの枠の中にある「Quick-use」もしくは「右矢印アイコン」をクリックすると、そのフォントを利用するためのHTMLソースが「3. Add this code to your website:」に、cssコードが「4. Integrate the fonts into your CSS:」に発行されていますので、下記のような形で適宜HTMLソースを書き換えてください。
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
.style {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div class="style">Sample view</div>
</body>
</html>
ちなみに当サイトでもロゴの部分に利用中です。