Google Fonts をWebフォントとして利用する

2023年1月15日

フォントを探して選択します。フォントの簡単な探し方はこちら。

ページを下へスクロールしていくと Styles が現れます。その中から利用したいスタイルをクリックします。フォントによってはスタイルが１つしかないものもあります。複数追加することもでき、選択するとプラスのアイコンがマイナスのアイコンに変わります。

追加できたら右上のアイコン（View selected families）をクリックします。

一番上にフォント名が出ています。複数のフォントを追加した場合はこちらで削除が可能です。
Webフォントとして利用する場合は、<head> 内に記述するコードと、CSS に利用するコードをコピーします。

以下のような index.html ファイルを作成します。

<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=Orbitron:wght@500&display=swap" rel="stylesheet">
<!-- ↑ここまで↑ -->
</head>
<body>
<style>
body {
  /* ↓ここから↓ */
  font-family: 'Orbitron', sans-serif;
  /* ↑ここまで↑ */
}
</style>
<p style="font-size: 40px">
1234567890
</p>
</body>
</html>

ブラウザで開くとフォントが利用できていることを確認できます。

ビジネスGoogleFonts

Posted by kidatti