Help us understand the problem. What is going on with this article?

Webフォントの使い方

More than 3 years have passed since last update.

[目的] 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

ikenyal
zozotech
70億人のファッションを技術の力で変えていく
https://tech.zozo.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした