(cache) 【Webサイト制作】自由にフォントを選ぼう！Google Fonts を使ってみたよ！

どうも、@とよしーです。

webデザイナーを目指すために書き始めたこのブログですが、趣旨がだんだんずれてきました。
書きたいことを書くオアシスみたいなブログになりつつあります。

それはそれでいいかなー、なんて思いつつあります。

さて今回は、Google Fonts を今更ながら使ってみたのでレポートしてみたいと思います。

Google Fonts って？

これまでは Google Web Fonts という名前でも呼ばれていたようです。Google Fonts はクラウド型のフォントサービスです。
webサイトで表示できるフォントは、これまではwebサイトを閲覧する端末にインストールされたフォントに限られていました。それ以外のフォントを使用するには、使用する部分を画像にしたりする必要がありました。

しかし、この Google Fonts を使うと製作者が用意したフォントを表示させることができるようになります。それってどういうことなのか、これから順番に見ていきたいと思います。

1.まずは Google Fonts にアクセスしましょう
f:id:tktyo:20140812191827p:plain

2.すると、使用できるフォントの一覧が表示されます。今回は Audiowide というフォントを使用したいと思います。
f:id:tktyo:20140812192414p:plain

　①フォントを選択して
　②「Add to Collection」を選択します。
　③Quick-use をクリックします。

3.Autowide というフォントを使用する準備ができました。
フォントによっては Normal400 のほか、斜体や太字などを使用できるようです。
f:id:tktyo:20140812192427p:plain

4.「Standard」タブにあるコードをコピーして <head> ～</head>タグの間にコピーします。
f:id:tktyo:20140812192837p:plain

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/base02.css">
<title>Project1</title>

<!-- [if lt IE9] -->
<script src="js/html5shiv.js"></script>
<!-- [endif] -->


<!-- [if lt IE9] -->
<script src="js/css3-mediaqueries.js"></script>
<!-- [endif] -->

<link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>
</head>

5.合わせて CSS も直しておきます。今回はヘッダー部分にフォントを適用します。

/*----------------------------------------
ヘッダーのスタイル
----------------------------------------*/
header{
	text-align:center;
	font-family: 'Audiowide', cursive;
}

6.するとタイトルや、右上の項目に、Audiowide のフォントが使用されるようになりました。
f:id:tktyo:20140812193229p:plain

これまでは一つ一つ画像を作っていましたが、Google Fonts で結構簡単に好きなフォントを導入できます。
ただ注意なのは、Google Fonts は欧文フォントしか使用できないことが注意点ですね。

日本語のWebフォントサービスもあるようですので、こちらもチェックしてみてはいかがでしょうか。
最新-2014.08：日本語WEBフォント情報。（+アイコンフォント） - NAVER まとめ

webデザイナー Level1

ド素人がwebデザイナーを目指すよ

【Webサイト制作】自由にフォントを選ぼう！Google Fonts を使ってみたよ！

Google Fonts って？