Webサイトを作っていると、「このフォントをそのままサイトでも使いたい」と思うことがあります。
そんなときに使うのがWebフォントです。
Webフォントとは、ユーザーのパソコンにそのフォントが入っていなくても、Webページ側でフォントを読み込んで表示できる仕組みのことです。HTMLの<head>で読み込み、CSSのfont-familyで指定するのが基本です。Google FontsはCSSファイルを読み込む形で使え、font-familyで適用します。
見た目を整えやすい反面、導入方法をなんとなく真似してしまうと、「反映されない」「読み込みが重い」「太字がきれいに出ない」といったトラブルも起こりやすいです。
この記事では、Webフォントの導入方法をHTML・CSSの基本から整理しながら、初心者がつまずきやすい点までわかりやすく解説します。
Webフォントを導入する方法
Webフォントの導入方法は、大きく分けて2つあります。
1つ目は、Google FontsやAdobe Fontsなどの外部サービスを使う方法です。
2つ目は、自分でフォントファイルを用意してサーバーに配置し、@font-faceで読み込む方法です。@font-faceは、リモートサーバー上のフォントやローカルフォントを読み込むためのCSSルールとして定義されています。
初心者にとって導入しやすいのは、まず外部サービスを使う方法です。コードの用意が簡単で、導入ミスも起きにくいためです。
一方で、案件によっては配信方法やライセンスの都合で、自前で管理する方法が必要になることもあります。
①外部サービスを使用する方法
Google Fontsを使用する方法
Google Fontsは、無料で使える代表的なWebフォントサービスです。Googleの公式ドキュメントでは、HTMLにスタイルシートのリンクを追加し、その後CSSでフォントを指定する使い方が案内されています。必要なウェイトだけを指定したり、font-displayやtext=などで最適化できる点も案内されています。
導入の流れは次のとおりです。
1. 使いたいフォントを選ぶ
Google Fontsのサイトで使いたいフォントを選びます。
日本語サイトなら、たとえば「Noto Sans JP」のように可読性が高いものが使いやすいです。
2. 必要な太さだけを選ぶ
フォントには、400、500、700のように複数の太さがあります。
ここで全部読み込むのではなく、本文に使う400、見出しに使う700など、本当に必要な太さだけに絞ることが大切です。
最初のうちは、何となく全部読み込んでしまいがちですが、日本語フォントは特にデータ量が大きくなりやすいので、不要なウェイトまで増やすと表示速度に影響しやすくなります。Google Fonts公式も、必要なスタイルだけを指定して読み込む前提で説明しています。
3. HTMLの<head>にコードを貼る
Google Fontsで表示された埋め込みコードをコピーし、HTMLの<head>内に貼ります。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
4. CSSでフォントを指定する
そのあと、CSSで適用したい要素にfont-familyを書きます。
body {
font-family: "Noto Sans JP", sans-serif;
}
font-familyは、フォント名だけで終わらせず、最後にserifやsans-serifのような総称フォントも入れておくのが基本です。読み込みに失敗した場合でも、別のフォントで表示しやすくなるためです。
Adobe Fontsを使う方法
Adobe Fontsは、Creative Cloudの利用者にとって使いやすい方法です。
Adobe公式では、Web用フォントは発行された埋め込みコードを使って利用する仕組みであり、Adobe FontsのWebフォントファイルを自分でダウンロードして自サイトに置く使い方は認められていません。
導入の流れは次のようになります。
1. Adobe Fontsで使いたいフォントを選ぶ
普段IllustratorやPhotoshopで使っているフォントを、そのままWebでも候補にしやすいのが特徴です。
2. Webプロジェクトを作成する
Adobe Fontsでは、Webサイト用に「Webプロジェクト」を作成し、その中で使うフォントを設定します。
ここで対象ドメインも設定する形になります。
3. 発行されたコードを<head>に貼る
<link rel="stylesheet" href="https://use.typekit.net/xxxxxx.css">
4. CSSでフォントを指定する
Adobe Fontsでも、最終的にはCSSでfont-familyを指定して使います。
デザイン制作時とWeb公開時でフォントを揃えたい場合には便利ですが、案件では「そのフォントをWeb公開に使ってよいか」「公開ドメインは何か」を事前に整理しておいたほうが安全です。
③@font-faceで自分のサーバーから読み込む方法
自分で用意したフォントファイルを使う場合は、CSSの@font-faceを使います。MDNでも、@font-faceは独自フォントを定義するための仕組みとして説明されています。
基本形は次のようになります。
@font-face {
font-family: "MyFont";
src: url("/fonts/myfont.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}body {
font-family: "MyFont", sans-serif;
}
この方法は自由度が高い反面、初心者には少し難しめです。
理由は、ただファイルを置くだけではなく、次の点まで確認する必要があるからです。
- フォントのライセンスにWeb利用が含まれているか
- ファイル形式は何を使うか
font-weightやfont-styleを正しく分けて登録しているか- パス指定が正しいか
- サーバー設定やキャッシュの影響がないか
特に多いのが、太字用のファイルを用意していないのにCSSでfont-weight: 700;を指定してしまうケースです。
この場合、意図した見た目にならず、不自然な太字になることがあります。自前運用では、使うウェイトごとにきちんと登録する意識が必要です。@font-faceではfont-weightの指定で単一値または範囲を設定できます。
Webフォントを導入するときに確認すべきポイント！
Webフォントは、コードを貼れば使える便利な仕組みですが、導入前にいくつか整理しておくと失敗しにくくなります。
特に初心者のうちは、「使ってみたいフォント」を先に決めてしまいがちですが、実際にはどこに使うかと何を優先するかを先に考えたほうがスムーズです。
①本文用か見出し用かを先に決める
同じフォントでも、本文に向いているものと、見出しに向いているものがあります。
本文は長い文章を読むことが前提なので、クセが強すぎず、文字の形が安定しているフォントのほうが読みやすくなります。
一方で見出しは、ある程度印象があっても使いやすいため、少し個性のある書体を選ぶこともできます。
最初のうちは、本文と見出しでまったく違う方向のフォントを無理に組み合わせるより、まずは本文を読みやすいフォントで整えて、必要があれば見出しだけ変えるくらいのほうが失敗しにくいです。
②必要な太さ（ウェイト）のみ読み込む
Webフォントは、使う太さが増えるほど読み込むデータが増えやすくなります。
そのため、導入前に「本文は400」「見出しは700」のように、必要なウェイトをざっくり決めておくと無駄がありません。
とりあえず全部読み込んでしまいがちですが、実際はそこまで多くの太さを使わないこともよくあります。
何となく全部読み込むより、使う分だけに絞ったほうが管理もしやすくなります。
③サイトの雰囲気に合うかを確認する
フォントは文字そのものですが、サイト全体の印象にもかなり影響します。
たとえば、やわらかい雰囲気にしたいサイトなのに、かたい印象のフォントを選ぶと、デザイン全体に少しズレが出ることがあります。
逆に、フォントだけで雰囲気を作ろうとしすぎると、今度は読みにくくなることもあります。
まず読みやすさを優先して、そのうえで雰囲気に合うものを選ぶ考え方が大切です。
③商用利用や使用条件を確認する
フォントは見た目だけで選ばず、使用条件も確認しておきたいところです。
無料で配布されていても、使い方に条件がある場合があります。
個人ブログなのか、仕事のサイトなのか、クライアント案件なのかによっても判断が変わるので、導入前に確認しておくと安心です。このあたりを後回しにすると、あとでフォントの差し替えが必要になることもあります。
まとめ
Webフォントの導入方法は、一見すると「コードを貼るだけ」で簡単に見えますが、実際にはどの方法で読み込むか、どのフォントをどこに使うか、必要な太さだけを選べているかといった部分まで考えることが大切です。Google FontsやAdobe Fontsのような外部サービスを使う方法は初心者でも導入しやすく、@font-faceを使って自分で管理する方法は、より細かく調整したいときに役立ちます。
導入方法だけを覚えるのではなく、事前の確認ポイントや導入後のチェックまで意識しておくと、反映されない・重くなる・雰囲気が合わないといった失敗も防ぎやすくなります。最初はシンプルな方法から試しながら、少しずつ使い分けを覚えていくのがおすすめです。
