Google Fontsの使い方【2022年度版】

2022/12/05

Google Fontsの使い方が以前と若干変わっていたので2022年度版として書き直しました。今回はWebページで使う方法についてです。

公式ページは以下のリンクとなります。

ページを開くと以下の画面が現れます。1000以上のフォントが用意されているようですね。

好きなフォントを選んでクリックするとフォントサイズの調整バーがあるので任意の大きさを選びます。

右上の赤丸で示したアイコンをクリックすると右ショルダーバーが現れます。

下の赤枠のところをコピーします。左図はHTMLファイルのheadタグ内に、右図はCSS用です。

コピーしたスタイルシートのタグをheadタグ内に貼り付けます。以下の例は２つのフォントを使う例です。

CSSファイルに以下のように設定します。これもコピペです。

こちらがサンプルページ。タイトルが「Zen Dots」、テキストが「Oswald」というフォントを使っています。