【HTML】Webフォントを読み込む方法
HTMLでWebフォントを読み込む方法
Webフォントとは
Webフォントは、ユーザーのPCにインストールされていないフォントをウェブページで表示するために使用されます。通常、ウェブページはユーザーが持っているフォントを基に表示されますが、Webフォントを使用することで、デザイナーが指定したフォントでページを表示することができます。これにより、デザインの一貫性が保たれ、視覚的に優れたウェブページを作成できます。
Webフォントの読み込みには、主に外部サービスを使用したり、CSSの@font-faceを使ってローカルにフォントを読み込む方法があります。
Google Fontsを使う方法
Google Fontsは、無料で多くのWebフォントを提供しているサービスです。簡単にWebフォントを読み込むことができ、フォントの種類も豊富です。Google Fontsを使用する方法は以下の通りです。
1. Google Fontsのウェブサイト（https://fonts.google.com）にアクセスし、使用したいフォントを選びます。
2. フォントを選択すると、「Embed」をクリックし、提供されたリンクタグをコピーします。例えば、以下のようなリンクタグが提供されます：
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
3. このリンクタグをHTMLの
セクションに追加します。
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
4. 次に、CSSファイルでフォントを適用します。例えば、以下のように記述します。
body {
font-family: 'Roboto', sans-serif;
}
この方法でGoogle Fontsを使用することができます。
CSSでWebフォントをインポート
WebフォントをCSS内でインポートする方法もあります。特に、CSSファイル内でWebフォントを使いたい場合に便利です。以下の例では、Google FontsからRobotoフォントをCSS内でインポートしています。
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
@import文を使うことで、HTML内にリンクタグを追加することなく、CSSファイルの中で直接Webフォントを読み込むことができます。この方法は、CSSの管理がしやすくなるため便利です。
ローカルのWebフォントを使用する方法
自分で所有しているフォントファイルをウェブページに読み込むことも可能です。ローカルのWebフォントを使用するには、まずフォントファイル（通常はwoff、woff2、ttfなど）をウェブサーバーにアップロードし、CSSでそのファイルを指定します。
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/mycustomfont.woff2') format('woff2'),
url('fonts/mycustomfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', sans-serif;
}
上記の例では、’MyCustomFont’というカスタムフォントを指定しています。フォントファイルをサーバー上の適切な場所に配置し、そのパスを指定することで、カスタムフォントをページに適用できます。
@font-faceを使ったカスタムフォントの設定
@font-faceは、Webフォントを読み込むための最も一般的な方法です。このCSSルールを使うことで、Webフォントを自分のサーバーから読み込み、指定したフォントをページに適用することができます。ローカルフォントを利用する場合や、特定のWebフォントプロバイダーを使用する場合にも利用できます。
例として、woff2フォーマットのWebフォントを使用する設定を紹介します。
@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'OpenSans', sans-serif;
}
上記のコードでは、’OpenSans’というフォントを読み込み、ページのボディに適用しています。フォントファイルのパスを正しく指定することが重要です。また、複数のフォーマット（woff、woff2、ttfなど）を指定することで、異なるブラウザに対応できます。