HTMLでフォントを変更する方法｜CSSを使った実践ガイド

font-family CSSプロパティを使えば、HTMLドキュメントのフォントを自由に定義できます。外部フォントを参照したい場合は、url()メソッドで@font-faceを定義するか、Google Fontsのようなサイトからフォント用のCSSファイルを読み込むことが可能です。

開発者なら誰でも、HTMLが処理されたときにデフォルトで表示されるフォントではなく、独自のフォントを使いたい場面に一度は遭遇するはずです。この記事では、ベストプラクティスに沿って、HTMLドキュメントのフォントを変更する方法をご紹介します。

HTMLでフォントを変更する3つの方法

HTMLでWebページのフォントを変更するには、主に次の3つの方法があります。

font-familyルールで組み込みフォントを指定する
@font-faceルールで外部フォントファイルを読み込む
外部CSSスタイルシートでWebページのフォントを一括管理する

以下では、それぞれの方法について詳しく解説していきます。

font-familyプロパティで組み込みフォントを指定する

最初の方法は、インラインスタイルでfont-familyプロパティを使うやり方です。具体的には次のように記述します。

<p style="font-family:wingdings;" id="wingdings">New York</p>

font-familyプロパティで、テキストブロックに適用したいフォント名を指定するだけです。多くの標準フォントはすぐに利用できます。

なお、最初に指定したフォントが何らかの理由で読み込めなかった場合に備えて、バックアップ（代替）フォントを設定しておくのがおすすめです。カンマを追加して別のフォント名を並べるだけでOKです。さらに、万が一どのフォントも利用できなかったケースに備え、最後にジェネリックファミリー（総称ファミリー）を指定しておくと安心です。

<p style="font-family: Roboto, Lato, sans-serif" 
id="roboto-plus-backups">New York</p>

末尾に指定したジェネリックファミリーは、ユーザーのデバイスが標準で持つsans-serifフォントを指します。指定できるジェネリックファミリーはmonospace（等幅）、serif（明朝体・ローマン体）、sans-serif（ゴシック体）、cursive（筆記体）、fantasy（装飾系）の5種類です。Times New Romanなどの特定のフォント名を直接指定することもできます。

@font-faceルールで外部フォントを読み込む

@font-faceルールを使えば、外部ソースからフォントファイルを読み込み、Webページで使用できるようになります。

この方法では、外部のフォントファイルへのアクセスが必要です。フォントファイルの拡張子は通常「.ttf」（TrueType Font）です。

それでは、@font-faceを使ったフォント変更の手順を見ていきましょう。まず、次のCSSルールを記述します。

@font-face {
	font-family: "Open Sans";
	src: url(yoururl);
}

@font-faceスタイルで新しいフォントを宣言します。font-family属性は新しいフォントの名前を定義し、src: url()はCSSドキュメントに対してフォントファイルの場所を指示します。「yoururl」の部分には、実際のフォントファイルのURLを指定してください。

ただし、この時点ではまだWebページのフォントは変わりません。どの要素に新しいフォントを適用するかを、CSSスタイルシートに伝える必要があります。

h1, h2, h3 {
	font-family: "Open Sans";
}

このコードは、「Open Sans」フォントをWebページ上の特定の要素に適用するようCSSに指示しています。「h1, h2, h3」はCSSセレクタで、見出し要素（HTMLヘッディング）に対してスタイルを適用します。

外部CSSフォント（Google Fonts）を活用する

Google Fontsなどのサービスでは、CSSスタイルシート経由でフォントをサイトに埋め込めます。ここでは例として、Google Fontsの「Bangers」と「Yellowtail」を使ってみましょう。

<p id="sans-serif" style="font-family: Bangers, sans-serif" >New York</p>
<p id="cursive" style="font-family: Yellowtail, cursive" >New York</p>

上記のコードをそのままIDEで実行してブラウザで表示すると、フォントはジェネリックフォントで表示されます。これらのフォントを実際に使いたい場合は、以下の手順で数クリックするだけで簡単に導入できます。

Google Fontsにアクセスします。
まずはサイトを自由に触ってみましょう。多数のフォントが揃っており、ページ上部の入力欄に任意のテキストを入力すれば、サンプル文字のカスタマイズも可能です。
検索ボックスで「Yellowtail」を検索してクリックします。フォントの詳細情報画面に移動したら、「+ Select this style」ボタンをクリックします。
サイドバーに選択内容の情報が表示されます。この状態のまま他のフォントも探せるので、画面上部の「Browse Fonts」リンクをクリックして「Bangers」を検索し、Yellowtailと同じ手順で追加します。
サイドバーの「Embed」タブをクリックします。
<link>オプションがすでに選択されているので、その<link>タグをコピーして、HTMLのhead要素内に貼り付けます。
CSSでの各フォントの使い方に関するガイドラインに従います。推奨される代替フォントも併せて紹介されているので参考にしましょう。
これで完了です！あとはドキュメント内で自由にこれらのフォントを使えます。

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Bangers&family=Yellowtail&display=swap" rel="stylesheet">
 
 </head>
 <body>
   <p id="courier">New York</p>
   <p id="roboto">New York</p>
   <p id="raleway" style="font-family: Raleway, sans-serif">New York</p>
   <p id="serif" style="font-family: Courier New">New York</p>
   <p id="monospace" style="font-family: Roboto Monospace, monospace">New York</p>
   <p id="sans-serif" style="font-family: Bangers, Anton, sans-serif" >New York</p>
   <p id="cursive" style="font-family: Yellowtail, cursive" >New York</p>
   <p id="roboto-condensed" style="font-family: Roboto Condensed, sans-serif">New York</p>
 </body>
</html>

上記の動作サンプルでは、組み込みフォントとサードパーティ製フォントの両方が使われています。ぜひ他のフォントの読み込みにも挑戦してみてください。

まとめ

HTMLのフォントは、font-familyプロパティを使うか、カスタムフォントを含む外部CSSスタイルシートを読み込むことで変更できます。サイトのCSSにカスタムフォントを埋め込みたい場合は、@font-faceルールを活用しましょう。

HTMLのコーディングについてさらに深く学びたい方は、ぜひ「HTMLの学び方」ガイドもチェックしてみてください。効果的なHTML学習のコツから、おすすめのオンライン講座の情報まで詳しく解説しています。

HTMLで改行する方法を解説！brタグとpreタグの使い分け

HTMLの上付き文字（sup）と下付き文字（sub）の使い方と活用シーン

HTMLのfontタグとは？色・書体・サイズの指定方法を解説
HTMLの<font>タグは、文字の色・フォント（書体）・サイズを指定するために使用されるタグです。主な属性は以下のとおりです。 color: 文字の色を指定します。 face: フォントの書体（フォントファミリー）を指定します。 size: 文字サイズを指定します。注意：<font>タグはHTML5では廃止されており、最新の標準規格ではサポートされていません。現行のWebページでは、CSSの「color」「font-family」「font-size」などのプロパティを使ってスタイルを指定することが推奨されています。それでは、HTMLで<font>
HTML DOM Styleのfontプロパティとは？設定方法と使い方を解説
HTML DOMのStyleオブジェクトが持つfontプロパティは、CSSのフォントに関する6つの個別プロパティ（font-style、font-variant、font-weight、font-size、line-height、font-family）を一括して取得・設定するために使用されます。このうちfont-size（フォントサイズ）とfont-family（フォントファミリー）は必須の値であり、省略された他の値にはデフォルト値が自動的に適用されます。 fontプロパティの値を取得する構文現在設定されているfontプロパティの値を取得する場合は、以下の構文を使用します。 object.