Google Fontsを複数指定して読み込む方法

以前のブログはこちら

広告

こんにちは。ましじめの田村です。

私が執筆した著書、『現場のプロから学ぶ CSSコーディングバイブル』は、Web制作の現場で役立つテクニックやノウハウをまとめています。
興味を持っていただけた方は、ぜひご覧ください。
https://amzn.to/3A8kNHC

このリンクは Amazon のアフィリエイトプログラムを通じて設定されています。

こんにちは。ましじめの田村です。

Google Fontsを使用する場合に複数使用したいケースがあったとします。
Google Fonts

この場合、個別に読み込むと次のようになると思います。

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">

1つにまとめたい場合| で区切ることでまとめて指定することが可能です。

<link href="https://fonts.googleapis.com/css?family=Roboto|Noto+Sans+JP&display=swap" rel="stylesheet">

さらに:, iを使用することでウェイト、イタリック体を指定することも可能です。

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400i|Noto+Sans+JP|Material+Icons&display=swap" rel="stylesheet">

Google Fontsを読み込む場合に参考にしてみてください。


関連するタグ

この記事を書いた人

たむら しょうご

HTML&CSSコーダー

ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。

ましじめのスキルが必要ですか?

遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、あなたのウェブサイトの制作を強力にサポートいたします。

お問い合わせはこちらから