• Home
  • twitter
  • Facebook Page
  • google+
  • RSS
  • follow us in feedlyfeedly
  • Contact Form
OPEN
2012/12/26

Webフォント「Google web fonts」の使い方・実装手順メモ

Skitched 20121226 091902
商用・非商用を問わず無料で利用できるWebフォント、「Google web fonts」の実装方法をさっくりメモっておきたいと思います。

Google Web Fonts


Google web fontsとは

Webページ閲覧時、通常ではパソコンにインストールされているフォントしかブラウザで表示することが出来ませんが、「Webフォント」を使用すると任意のフォントを表示することが出来ます。
Googleの提供するGoogle Web Fontsはアカウント登録の必要も無く、実装が非常に簡単なそれの一つです。商用・非商用ともに無償で利用が可能と言うのもポイント:)

 

Skitched 20121226 092905

Skitched 20121226 093031

ちなみに当サイトでも日付の表示とサイドバー・フッターの見出しにGoogle web fontsの「Coda」を使用しています。

 

Google web fontsの実装方法

実装の手順は3ステップ。

1.使いたいフォントを選択する
2.CSSを追加する
3.スタイルシートにてfont-familyを適用する

以上。ちょーかんたぁーん。

 

1.使いたいフォントを選択する

まずはGoogle Web Fontsに行って、使いたいフォントを選択しましょう。

 

Skitched 20121226 094210
フォントを選ぶ時はカテゴリーやウェイト(太さ)などを絞って選択も出来ますし…

 

Skitched 20121226 094038
このように任意の単語・文章を入力して様子を窺うことも可能です。
かちびと.netさんで紹介されておりましたBest Google Web Fontsなんかを使用するのもよいですね!

参考:Google Web FontのフォントをCSS3で装飾した状態で確認出来る・Best Google Web Fonts – かちびと.net

 

2.CSSを追加する

Skitched 20121226 094410
使用するフォントが決定したらフォント下部にある一番左のアイコンをクリックしましょう。

 

Skitched 20121226 110555
ウェイトなどの項目をチェックしたら画面中ほどにある「3. Add this code to your website:」のコードをheadタグ内に挿入します。何か事情の無い限りは「Standard」タブの<link href=○○>をコピペすれば大丈夫です。

html

<head>
(中略)
	<link href='http://fonts.googleapis.com/css?family=Libre+Baskerville' rel='stylesheet' type='text/css'>
(中略)
<head>

こんな感じ。

 

3.スタイルシートにてfont-familyを適用する

ここまで来たらあとはWebフォントを適用する要素にfont-familyを設定してあげるだけです。

 

Skitched 20121226 112919
「4. Integrate the fonts into your CSS:」にある、「font-family」プロパティをコピペ。

CSS

p{
	font-family: 'Libre Baskerville', serif;
}

こうですね:)
では実際にどのように表示されるかみてみませう。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Google web fonts</title>
	<link href='http://fonts.googleapis.com/css?family=Libre+Baskerville' rel='stylesheet' type='text/css'>
	<style>
	p{
		font-family: 'Libre Baskerville', serif;
		font-size: 100px;
	}
	</style>
</head>
<body>
	<p>
		Ai Shinozaki
	</p>
</body>
</html>

ためしにこんなの書いてみました。

Skitched 20121226 115304
見事、フォントが設定されてますね!

 

Skitched 20121226 115416
文字なので選択も出来ますし…

 

Skitched 20121226 115505
テキストシャドウなどの装飾も可能!

と、言うわけでGoogle web fontsの使い方と実装方法でした。テキストなのでSEO的にも良いはずですし、スマートフォンでも表示されるのが嬉しい点。
MacBook Proなど、retinaディスプレイ対応のPCでもキレイに表示されます。興味のある方はお試しあれい。

SPONSORED LINK

FB Comments

About This Site

Mac,iPhone,Evernote,Web,Foodを中心に様々な情報をお届けするブログです。
ふざけた文体が目につきますが、本人はいたってふざけております。
ご意見・ご感想は info[at]ozpa-h4.com もしくはコンタクトフォームまでどうぞ。
広告掲載、執筆、取材などの依頼も受け付けております。
さらに詳しく

SNS

×