(Sample)
Google Webフォントは、無料で利用できるオンラインフォントライブラリで、Webデザインの一環として簡単にカスタムフォントをWebページに導入できます。
以下はその使い方です。
1. Google Fontsのウェブサイトにアクセスする
まず、[Google Fontsのウェブサイト](https://fonts.google.com/)にアクセスします。
2. フォントを選ぶ
サイト上で使用したいフォントを探します。フォントはカテゴリーや言語でフィルタリングすることができます。
3. フォントを選択する
使用したいフォントが見つかったら、「Get font」ボタンをクリックしてフォントを選択します。注意点として、さまざまな文字の太さがありますので、最適な太さを選んで下さい。
4. フォントをインポートする方法を選ぶ
選択したフォントをウェブページに追加するための方法は2つあります：linkタグを使う方法と、@importを使う方法です。
方法1: linkタグを使う
以下のように、<head>タグ内に<link>タグを追加します。
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
方法2: @importを使う
CSSファイルに以下のように`@import`を追加します。
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
5. フォントをCSSで指定する
フォントをインポートしたら、CSSでフォントファミリを指定して使用します。例えば、ボディ全体にRobotoフォントを適用するには以下のようにします。
body {
font-family: 'Roboto', sans-serif;
}
この例では、sans-serifをフォールバックフォントとして指定しています。なお、フォールバックフォントとは、フォントにない文字があった場合に自動的に適用される代替のフォントのことです。
6. オプション設定
Google Fontsでは、表示設定をカスタマイズするオプションもあります。例えば、「display=swap」パラメータを使うことで、フォントが読み込まれるまでの間、フォールバックフォントが表示されるようになります。
以下は使用例です。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>google-fonts.html</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Concert+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');
.font-amatic {
font-family: 'Amatic SC', cursive;
}
.font-baloo {
font-family: 'Baloo 2', cursive;
}
.font-concert {
font-family: 'Concert One', cursive;
}
.font-dancing {
font-family: 'Dancing Script', cursive;
}
.font-fjalla {
font-family: 'Fjalla One', sans-serif;
}
.font-indie {
font-family: 'Indie Flower', cursive;
}
.font-lobster {
font-family: 'Lobster', cursive;
}
.font-pacifico {
font-family: 'Pacifico', cursive;
}
.font-roboto-mono {
font-family: 'Roboto Mono', monospace;
}
.font-russo {
font-family: 'Russo One', sans-serif;
}
p{
font-size: 3rem;
}
</style>
</head>
<body>
<p class="font-amatic">これはAmatic SCフォントです。</p>
<p class="font-baloo">これはBaloo 2フォントです。</p>
<p class="font-concert">これはConcert Oneフォントです。</p>
<p class="font-dancing">これはDancing Scriptフォントです。</p>
<p class="font-fjalla">これはFjalla Oneフォントです。</p>
<p class="font-indie">これはIndie Flowerフォントです。</p>
<p class="font-lobster">これはLobsterフォントです。</p>
<p class="font-pacifico">これはPacificoフォントです。</p>
<p class="font-roboto-mono">これはRoboto Monoフォントです。</p>
<p class="font-russo">これはRusso Oneフォントです。</p>
<p><a href="#" onClick="window.close(); return false;">このウィンドウを閉じる</a></p>
</body>
</html>