Webフォント「Google Fonts」を使ってみました

Webフォント「Google Fonts」を使ってみました

Webフォント「Google Fonts」を使ってみたので、使い方をメモします。

Google Fontsにアクセスします。

Google Fonts

使いたいフォントを選びます。
検索したり、好きな文字を打ち込んで雰囲気を確かめることができます。

選びます

使うフォントを決めたら、「Quick-use」ボタンをクリックします。

決めました

ページを下に進むと、貼り付け用のコードがあります。
@importやJavascriptのコードもありますが、今回はstandardのコードを使います。

コードです

コードをコピーして、<head>内に貼り付けます。
以下のコードは「Port Lligat Sans」のものです。

<link href='http://fonts.googleapis.com/css?family=Port+Lligat+Sans' rel='stylesheet' type='text/css'>

スタイルシートで使いたいフォントを設定すれば完了です。
以下のコードは「Port Lligat Sans」のものです。

コードです
font-family: 'Port Lligat Sans', sans-serif;

実際に使ってみるとこんな感じになりました。

ちょっと地味ですが…

参考サイト

今さらながらWebフォント「Google web fonts」の使い方・実装手順メモ | OZPAの表4

下のボタンを押すと拍手送信&メッセージフォームが開きます。→WEB拍手お返事