【HTML】フォントを変更する４つの方法

インラインスタイルでフォントを変更する

インラインスタイルを使って、HTMLの要素に直接フォントを指定する方法です。この方法では、特定の要素に対して個別にスタイルを設定することができます。

例えば、次のコードは、段落（<p>タグ）内のテキストにフォントを指定する例です：

<p style="font-family: 'Arial', sans-serif;">このテキストはArialフォントで表示されます。</p>

この方法は簡単ですが、大規模なWebサイトでは管理が難しくなることがあります。

内部スタイルシートは、HTMLドキュメント内に<style>タグを使用してCSSを埋め込む方法です。この方法では、複数の要素に一貫したスタイルを適用できます。

次の例では、<style>タグを使ってページ全体のフォントを変更しています：

<head>
    <style>
        body {
            font-family: 'Courier New', monospace;
        }
    </style>
</head>

このコードをページ内に追加すると、ページ全体のテキストが「Courier New」フォントで表示されます。

外部スタイルシートを使用すると、複数のHTMLファイルで同じスタイルを共有できるため、スタイルの管理が効率的になります。

外部スタイルシートを使ってフォントを変更する方法は、以下の通りです：

<link rel="stylesheet" type="text/css" href="styles.css">

そして、styles.cssファイル内で次のように指定します：

body {
            font-family: 'Verdana', sans-serif;
        }

この方法では、すべてのページで同じフォントを使うことができます。

Google Fontsを使うと、ウェブで利用可能な多くのフォントを簡単に導入できます。Google Fontsのサービスを利用するには、以下の手順を行います：

次に、Google Fontsを使ってページのフォントを変更する例です：

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

その後、CSSで指定したいフォントを使用します：

body {
            font-family: 'Roboto', sans-serif;
        }

これにより、ページ内のテキストがGoogle Fontsの「Roboto」フォントで表示されるようになります。