[CSS]無料で使えるWEBフォント「Google Web Fonts」の使い方｜CSS｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

[CSS]無料で使えるWEBフォント「Google Web Fonts」の使い方

スポンサード

Arial Black、Times、Verdana…など、WEBサイト制作時に指定するフォントはごく限られたモノになるかと思いますが、Google 提供のサービスの1つである Google Web Fonts を利用すると表現の幅が広がります。

Google Web Fonts は多数のフォントの中から使いたいフォントの太さ、スタイルなどを指定するだけで<link> タグや CSSのコードが生成されますので、それをサイトに貼付けるだけで使えます。

1 Google Fonts へアクセス
2 Google Fonts でフォントの検索
3 フォントの設定
4 生成されたコードをサイトにペースト
5 CSS でスタイルの指定
6 Google Fonts を使ったサンプル

Google Fonts へアクセス

以下のページからGoogle Fonts にアクセスします。

Google Fonts

Google Fonts でフォントの検索

Google Fonts ページの左メニューより使いたいフォントを直接入力するか、フォントの種類を絞り込んで検索します。

お気に入りのフォントが見つかったら、左側の「Quick-use」ボタンをクリックします。

フォントの設定

「Choose the styles you want」よりフォントのスタイルを選択します。

今回選択したフォントのスタイルは１種類ですが、フォントによっては太さの違いで複数がスタイルを選べますので、使いたいスタイルにチェックを入れます。

選択したフォントを読み込むスピードも合わせて掲載されていますので、パフォーマンスも考慮に入れておきましょう。

生成されたコードをサイトにペースト

「Add this code to your website」で生成されたコードをサイトにコピペします。

「Standard」タブ内に掲載されている

<link href='http://fonts.googleapis.com/css?family=Holtwood+One+SC' rel='stylesheet' type='text/css'>

のように<link> タグを使って <head> 内に設置するのがオーソドックスな使い方です。

CSS でスタイルの指定

Google Fonts を適用させたい要素にCSS でスタイルを指定します。

例えば以下のようなテキストにGoogle Fonts を適用したい場合、

<h1 class="logo">WEB ANTENA</h1>

logo 要素にスタイルを指定します。

h1.logo	{
	font-family: 'Holtwood One SC', serif;
}

Google Fonts を使ったサンプル

↓こんな感じで表示されます。

WEB ANTENA

スポンサード