Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

Google Web Fontsの使い方

今回は、「Google Web Fonts」の使い方について書きます。


Google Web Fontsを使うと簡単に、カッコいいフォントや綺麗なフォントが実装できます。

Google Web Fontsは、簡単に説明しますと、グーグルが提供しているWebフォントの事です。
特徴は、アカウント登録の必要なし, 実装が簡単, 無料, 基本的に商用利用も可能(一部、不可能)などです。


使い方を書いていきます。

Google Web Fontsの公式サイトに行き、使いたいフォントを選びます。
http://www.google.com/fonts
f:id:gupuru:20140203161124p:plain
使いたいフォントが決まったら、「Quick use(写真の赤丸の部分)」をクリックします。クリックすると、フォント説明のページに行きます。



フォント説明のページの下の方にcssのコードがあるので、それをそのままコピーします。
赤い枠線部分のコードをコピーします↓↓
f:id:gupuru:20140203161357p:plain
上の写真の場合ですと、「<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'」が読み込みに失敗した時に、読み込まれるフォントです。


貼り付けたら、後は実行するだけです。
実行例です↓
f:id:gupuru:20140203161745p:plain


以上で、終わりです。
とても簡単に使えました(笑)


参考ページ
デザイナーなら知っておかないと損するGoogleWebフォント特選10個 | Find Job ! Startup
Webフォント - Wikipedia