Web フォントを使ってみよう

Web フォントとは？

Webフォントはネットワーク上からフォントデータを読み込みWebサイトに表示する仕組みを利用しています。

Googleが提供する、無料で利用可能ななフォントのディレクトリーサービスです。
Googleのサーバーからフォントデータを読み込んでWebページにフォントを表示できるWebフォントで世界各国で利用されています。

Google　Fonts のページへアクセス

「Search fonts」へフォント名を入れて選ぶか、左側のフォントのイメージから探して選ぶ

フォントが決まったらそのフォントをクリックします。
すると図のように「Get font」のボタンが出るのでクリックしてください。

複数のフォント・スタイルを選択・削除することもできます。

フォントを使用するためのコードを表示させる

<head>～</head>内にコピーしたコードをいれます。
「Copy code」をクリック

「HTML」
<head>～</head>内へペーストしてください

以下だけでもOK
<link href="https://fonts.googleapis.com/css2?family=Borel&display=swap" rel="stylesheet">

このままCopy codeをクリックして使用してもOKですが、ここでは「font01」を作って使用してみます。
「font-family: "Borel", serif;」のところだけコピーしてください

「CSS」
使いやすいように自分で名前をつけてCSSへ保存しましょう
ここでは「.font01」としました。

<p class="font01">Web Fonts ABCD 12345</p>

Web Fonts ABCD 12345

h1などのタイトルへの使用する場合は..