@ CSS

@font-face

サーバ上のフォントを利用するには、@font-face ルールでフォントを登録します。登録後は通常のフォントと同じように使うことができます。

Google もWeb フォントのライブラリを提供するサービスを実施しています。

Google Web Fonts は他のフォント提供サービスと比較して、とても簡単に利用できます。アカウント登録も不要で、すべてのフォントがオープンソースとして提供されています。

Google Web Fonts は以下の3つのステップで利用できます。

1. フォントを選ぶ

Google Web Fonts へアクセスして、利用したいフォントを選びます。

2. embed コードを HTML に追加する

選択したフォントの embed コードを HTML ドキュメントの <head> 内にコピーします。

3. font-family を適用する

指示されたルールセットをCSSファイルに追加し、対象のセレクターに font-family を適用します。

webfont_01

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
<style>
div {
  font-family: Anton;
  font-size: 4rem;
} 
</style>
</head>

<body>
  <div>Anton</div> 
</body>

</html>

@font-face を使って次のように CSS を書くこともできます。

URL でアクセス可能な形で公開されている Web フォントであれば、@font-face を使って Web ページ上のテキストに適用することができます。

webfont_02

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<style>
@media screen {
  @font-face {
  font-family: 'Anton';
  font-weight: normal;
  font-style: normal;
  src:url('http://fonts.gstatic.com/s/anton/v7/o-91-t7-bPc7W26HmS2N4Q.woff2') format('woff2');
  }
}
div {
  font-family: Anton;
  font-size: 4rem;
} 
</style>
</head>

<body>
  <div>Anton</div> 
</body>

</html>

demo