【保存版】Webフォントの使い方と無料のおすすめサイト一覧（日本語・欧文）

野田

2022.05.11

先週、新婚旅行という人生最大級の贅沢を楽しんできたため、日本に帰ってきて放心状態になっている野田です。

もう少し逃げていたかった……現実から……。

という話は置いておいて。最近LIGのブログではフォントネタが頻繁に登場するようになってきたので、それに僕も便乗しようと思います。

Webに関わっている人でも、「フォントが大事なのはわかるけどWebフォントは設定していない……」という人も多いんじゃないですか？

今日はWebフォントの使い方とおすすめの無料で使えるWebフォントサービスをご紹介します。

「わからないこと」が一瞬で解決するかも？

Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します！

▼少しでも気になる方は、ぜひ公式サイトをご覧ください！
デジタルハリウッドSTUDIO by LIG

Webフォントとは？
Webフォントの使用手順
手順が面倒な人向け（Google Fonts）
商用利用OK！おすすめのWebフォントサイト一覧
まとめ

※編集部注：2021年2月に公開されたものを最新情報を踏まえ編集・更新しました。

Webフォントとは？

Webフォントを導入すると、サーバー上にあるフォントファイルを参照するため、ユーザーのPCにインストールされていないフォントも表示できるようになります。いちいち自分のローカルにインストールする必要もないので、めっちゃ便利です。

しかも、Webフォントを使うことで、サイトのデザイン性を向上させることができますし、何よりサーバーから読み込むため、iPhone、Android、PC、どの端末でも共通のフォントを表示させることができるというメリットがあります。

今さら聞けないWebフォントの基礎知識

Saki Hanazawa

2021.07.30

185

CSSを触る必要があるので、Webフォントは難しいと思われがちですが、ほんのちょっとの手順を踏めば、案外簡単に利用できます。ですが、忙しいという理由で後回しにしている方も多いのでは？

今回はそんな方のために、Webフォントに関するサイトのまとめと、使い方を簡易的にお伝えします。とりあえず、一回だけサクっとやってみちゃってください！案外それをきっかけに興味を持つものだと思うので、僕はきっかけづくりができればいいかな〜なんて良い人ぶって書かせていただきます。

Webフォントの使用手順

ではさっそく、下記の手順を参考にWebフォントの設定をしてみてください。

手順1. 使いたいWebフォントを見つける

まずは、使いたいフォントを見つけてください。

欧文フォント、和文フォント、アイコンなど、使うフォントによって、出力できるものが異なるのでご注意を。

フォントを見つけられるサイトは、このページの一番下にまとめてありますので良かったらご覧ください。

▼ おすすめのWebフォントサイト一覧へ

このとき、ローカルに使用したいフォントがある場合は、※サーバへアップロードしてください。

※ライセンス確認は必ず行ってください。著作権フリーでも再配布禁止のフォントはたくさんあるので、ご注意ください。

手順2. CSS3の@font-faceでフォントファイルを指定

CSS3の@font-faceでフォントファイルを読み込ませます。念のためですが、第3者サーバにあるフォントに関しては絶対パスになります。

Google Fontsに関しましては、フォントを選ぶとCSSを提供してくれるので、それを読み込ませるだけになります。Google Fontsの指定は後ほど。

/* IE */
@font-face {
font-family: フォント名;
src: url(font/フォント名.eot);
}
/* Firefox, Opera, Safari */
@font-face {
font-family: フォント名;
src: url(font/フォント名.ttf) format(”truetype”);
}

手順3. CSSでWebフォントを適用させる

手順2. のCSSを読み込ませた状態で、下記の記述をします。

CSS

h1 {
font-family: ‘フォント名’;
}

HTML

<h1>Web Font</h1>

手順4. 確認（おわり）

とりあえず、だいたいこれで終わりです。ブラウザで確認してみてください。

検証となりますので、IEを使う場合は最新版で行ってくださいね。

手順が面倒な人向け（Google Fonts）

この手順ですら面倒だと思う方は、Google Fonts上でお気に入りのWebフォントを見つけ、そのソースコードをhead内に入れるだけでもOK。

ソースコードは以下の方法で確認できます。

googlefontsのコード確認方法

今回は、わざと分かりやすいようなフォントを選んで使わせていただいております。

<!DOCTYPE HTML>
<html>
<head>
 <!--フォントの読み込み-->
<link href="https://fonts.googleapis.com/css?family=Patrick+Hand+SC" rel="stylesheet">
<style>
body {　/*セレクタに font-family を指定*/
font-size: 25px;
font-family: ‘Sacramento’, cursive;
}
</style>
</head>
<body>
<h1>google web font</h1>
</body>
</html>

上記のうち、<link>タグ部分と、<style>タグ内をフォントによって入れ替えます。

表示できましたか？？本当に簡単でしょ？