Google Web Fontsの使い方
今回は、「Google Web Fonts」の使い方について書きます。
Google Web Fontsを使うと簡単に、カッコいいフォントや綺麗なフォントが実装できます。
Google Web Fontsは、簡単に説明しますと、グーグルが提供しているWebフォントの事です。
特徴は、アカウント登録の必要なし, 実装が簡単, 無料, 基本的に商用利用も可能(一部、不可能)などです。
使い方を書いていきます。
①
Google Web Fontsの公式サイトに行き、使いたいフォントを選びます。
http://www.google.com/fonts
使いたいフォントが決まったら、「Quick use(写真の赤丸の部分)」をクリックします。クリックすると、フォント説明のページに行きます。
②
フォント説明のページの下の方にcssのコードがあるので、それをそのままコピーします。
赤い枠線部分のコードをコピーします↓↓
上の写真の場合ですと、「<link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>」と「font-family: 'Audiowide', cursive;」をコピーします。
③
コピーしたコードをHTMLに貼り付けます。
こんな感じに貼り付けます↓↓
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>google web fonts</title> <link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'> <style> h1 { font-family: 'Audiowide', cursive; } </style> </head> <body> <h1>Google Web Fonts</h1> <p>test</p> </body> </html>
まず<head>~</head>の間に、
<link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>
を貼り付けます。
次に、
<style>の部分に、
font-family: 'Audiowide', cursive;
を貼り付けます。
「'Audiowide', cursive」の「, cursive」の部分は、「'Audiowide'」が読み込みに失敗した時に、読み込まれるフォントです。
貼り付けたら、後は実行するだけです。
実行例です↓
以上で、終わりです。
とても簡単に使えました(笑)
参考ページ
デザイナーなら知っておかないと損するGoogleWebフォント特選10個 | Find Job ! Startup
Webフォント - Wikipedia