解説
「Webフォント」は、Webページが表示される時に、Webブラウザに読み込まれるフォントやそのシステムです。CSS 3.0以降の機能です。CSS 3.0より前では、Webブラウザがインストールされた環境に存在するフォントしか利用できませんでしたが、Webフォントでは、コンテンツを作る側が用意したフォントを読み込んで表示できます。
「Webフォント」を利用するには、自分でサーバーにフォントをアップロードして、CSSファイルでフォントの読み込みを指定する以外にも、Webフォントサービスを利用する方法があります。Googleなどが、タグを貼るだけで利用できるWebフォントを用意していますので、そうしたものを利用するのも、一つの方法です。
英文字のWebフォントは、ファイルサイズが小さいのですが、日本語のWebフォントは、ファイルサイズが大きいです。そのため、全てのフォントをダウンロードするのではなく、使用している文字のみを収録したファイルをダウンロードする方法も使われます。
サンプル
「Webフォント」のサンプルを掲載します。1つ目がhtmlファイル、2つ目がCSSファイル（font.css）です。
ファイルはUTF-8で保存してください。検証はGoogle Chromeで行っています。
136_js.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>「Webフォント」のサンプル</title>
<link rel="stylesheet" href="font.css">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
</head>
<body style="font-size: 300%;">
<div>
ABCDEFG, hijklmn.
</div>
<div style="font-family: Kingthings_PL;">
ABCDEFG, hijklmn.
</div>
<div style="font-family: 'Pacifico', cursive;">
ABCDEFG, hijklmn.
</div>
</body>
</html>
font.css
@font-face {
font-family: 'Kingthings_PL';
src: url('Kingthings_Petrock_light.woff') format('woff'),
url('Kingthings_Petrock_light.ttf') format('truetype');
}
