トップページへ

Webフォント

Webサイト作成において、これまで作成側がフォント指定することはほとんど出来ませんでした。これは、作成側がフォント指定をしても、ユーザーのコンピュータの中にそのフォントが入っていなければ表示できなかったためです。
しかし最近、Webフォントの登場により変わってきています。

Webフォントとは

Webフォントとは、サーバー上に用意されたフォントのこと。サーバー上にフォントがあるので、ユーザー環境に左右されることなく作成側の望むフォントでWebページを表示させることができます。

Google Web Fonts

http://www.google.com/webfonts/

現在は欧文フォントのみ。フリーで使えるので試すのにはもってこいです。

【使い方】

  • 使いたいフォントを選ぶ
  • 各フォントの右下スミにある[Ouick-use]をクリック。(詳細を確認したい時は[Pop out])
  • 2つのコード(フォントをページへ読み込むためのリンクタグとCSSのフォント指定)が表示されるので、そのコードをそれぞれ(X)HTMLやCSSにコピーする。

XHTML

<head>
  …省略…
 <link href='http://fonts.googleapis.com/css?family=Henny+Penny' rel='stylesheet' type='text/css' /> 
 </head>
  …省略…
  <h5>Sample<br />
       Web Font</h5>

CSS

 h5 {
  color: #ff3300; 
  font-size: 36px; 
  font-family: 'Henny Penny', cursive;
 }
Sample
Web Font

【memo】

和文Webフォントも多数ありますがここではリンクしません。(条件によってNGだったり一部有料の場合もあるので。各自で検索して使い方や利用条件を確認したほうが良いと思います)

トップページへ戻る


最終更新日:2013年3月24日
楠 尚巳