• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

Google Fonts へアクセス

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


Google Fonts でフォントの検索

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

お気に入りのフォントが見つかったら、左側の「Quick-use」ボタンをクリックします。
無料で使えるWEBフォント「Google Web Fonts」の使い方

フォントの設定

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

今回選択したフォントのスタイルは1種類ですが、フォントによっては太さの違いで複数がスタイルを選べますので、使いたいスタイルにチェックを入れます。
無料で使えるWEBフォント「Google Web Fonts」の使い方

選択したフォントを読み込むスピードも合わせて掲載されていますので、パフォーマンスも考慮に入れておきましょう。
無料で使えるWEBフォント「Google Web Fonts」の使い方

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

「Add this code to your website」で生成されたコードをサイトにコピペします。
無料で使えるWEBフォント「Google Web Fonts」の使い方

「Standard」タブ内に掲載されている
<link href='http://fonts.googleapis.com/css?family=Holtwood+One+SC' rel='stylesheet' type='text/css'>
のように<link> タグを使って <head> 内に設置するのがオーソドックスな使い方です。


CSS でスタイルの指定

Google Fonts を適用させたい要素にCSS でスタイルを指定します。
無料で使えるWEBフォント「Google Web Fonts」の使い方

例えば以下のようなテキストにGoogle Fonts を適用したい場合、
<h1 class="logo">WEB ANTENA</h1>
logo 要素にスタイルを指定します。
h1.logo	{
font-family: 'Holtwood One SC', serif;
}


Google Fonts を使ったサンプル

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




  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す