1
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Webフォントの使い方

Posted at

[目的] Webフォントを使い、Web上の文字列のフォントを変更する。

Webフォントとは

CSS3より利用可能になったWeb上にあるフォントを使う仕組みです。
そのため、クライアントの環境に依存せずにフォントを表示することが可能です。

Webフォントの利用

Webフォントを探す

まずは、使いたいフォントを探してきましょう。インターネット上で検索すれば情報はたくさんあります。

実装

Webフォントを利用したいページで以下の実装を行います。

ここでは、以下のページを例として用意し、さわらび明朝 を適用します。

<html>
<head>
</head>
<body>
Webフォント 日本語<br>
あいうえお アイウエオ<br>
ABCDEFG abcdefg<br>
1234567890<br>
</body>
</html>

適用前のブラウザ上の表示
image

Step1. フォントの読み込み

headタグ内に以下のlinkタグを追加します。

<link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />

Step2. CSSでフォントを適用

headタグ内にstyleタグを追加し、CSSでフォントを適用したい範囲を指定します。
ここでは、bodyタグ内の全体の文字列に適用します。

<style>
body { font-family: "Sawarabi Mincho"; }
</style>

これだけでWebフォントが利用できます。

body内全体に適用
<html>
<head>
<link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />
<style>
body { font-family: "Sawarabi Mincho"; }
</style>
</head>
<body>
Webフォント 日本語<br>
あいうえお アイウエオ<br>
ABCDEFG abcdefg<br>
1234567890<br>
</body>
</html>

image

なお、CSSを利用してWebフォントの適用範囲を調整することもできます。

1行目のみ適用
<html>
<head>
<link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />
<style>
.wf-sawarabimincho { font-family: "Sawarabi Mincho"; }
</style>
</head>
<body>
<div class="wf-sawarabimincho">Webフォント 日本語</div>
あいうえお アイウエオ<br>
ABCDEFG abcdefg<br>
1234567890<br>
</body>
</html>

image

1
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?