Google Fonts 埋め込みチートシート

Google Fonts は、HTML や CSS へ手軽に埋め込めるオープンソースの Web フォントライブラリを提供しています。

埋め込み方法

HTML Link タグ

HTML ドキュメントの <head> 内に記述します：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">

CSS @import

CSS スタイルシートの他のどのルールよりも先頭に記述します：

/* ウェイト指定付きの単一フォントファミリー */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

/* 複数フォントファミリーの結合読み込み */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:ital,wght@0,400;1,400&display=swap');

CSS での Font Family 指定

body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

h1, h2, h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

参考リンク

• Google Fonts ライブラリ
• Google Fonts API ドキュメント