Webフォントは、ウェブページに独自のスタイルや見た目を与えるためのツールであり、Google Fontsのような外部ライブラリから使用したり、自分でホストしたりすることができます。以下に、Google Fontsを使用してWebフォントを導入する手順を説明します。
1.まずGoogle Fonts (https://fonts.google.com/) を開き、使用したいフォントを選択します。
2.フォントを選択したら、右上の”Select this style”ボタンをクリックします。
3.ページの右下に出てくるボックスの中から、タグをコピーします。このタグはHTML文書の
セクションに貼り付けます。例えば、Robotoフォントを選んだ場合、以下のようなコードが生成されます。
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap">
HTMLファイルの
セクションに上記のタグを貼り付けます。<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap"> </head> <body> <!-- your content here --> </body> </html>
次に、CSSで選択したフォントを適用します。例えば、全体のフォントを変更する場合、以下のようにします。
body {
font-family: 'Roboto', sans-serif;
}
以上で、Webフォントの導入は完了です。この手順により、ウェブサイトのテキストが指定したフォントで表示されるようになります。Google Fonts以外にも、Adobe FontsやFont Squirrelなど他のWebフォントサービスを利用することも可能です。
よくある質問（FAQ）
Q. Google Fontsを使うとページの読み込みが遅くなりますか？
A. fonts.googleapis.comへの外部リクエストが追加されるため影響があります。軽量化のポイント：
display=swapパラメータでフォント読み込み前にシステムフォントを表示。必要なウェイトのみ指定（400;700等）。プリコネクト（<link rel="preconnect" href="https://fonts.googleapis.com">）の追加。またはフォントをダウンロードしてself-hostingする方法が最も高速です。Q. セルフホスティング（自前サーバー）でGoogle Fontsを配信するにはどうすればよいですか？
A. google-webfonts-helperなどのツールでフォントファイルをダウンロードし、サーバーに設置してCSSの
@font-faceで読み込みます。WOFF2形式が最も圧縮率が高くモダンブラウザ全対応です。プライバシー面でもユーザーのIPがGoogleに送信されないメリットがあります。Q. 可変フォント（Variable Font）とはどういうものですか？
A. 1つのフォントファイルにウェイト・幅・スラントなどのバリエーションが含まれたフォントです。複数のウェイトファイルを読み込まなくてよいためファイル数・容量を削減できます。CSSで
font-weight: 100-900のように細かくウェイトを指定できます。Google Fontsでも多くの可変フォントが提供されています。
