Google Fontsを使うために2つの準備をしましょう。
- ステップ1：使いたいGoogle Fontsを選ぶ
- ステップ2：練習用HTMLファイルを確認する
いきなりコードを書くんじゃなくて、 ちゃんと準備からやるんだね。
そうです。 Google Fonts は種類がとても多いので、 どのフォントを使うかを決めることが最初のステップになります。
たくさんありすぎると、 どれを選べばいいか迷いそう…。
大丈夫です。
今回は学習用として、 あらかじめ指定したフォントを使って進めます。
フォント選びそのものは、 あとで自由に試せるようにしましょう。
ステップ1：使いたい Google Fonts を決める
今回は、次の Google Fonts を使います。
今回使用するフォント
- フォント名：Dela Gothic One
-
日本語に対応していて、標準フォントよりもどっしりとした太字になっている
文字の形がはっきりしていて、 変化が分かりやすそう！
そうですね。 フォントの変化がすぐに分かるものを選ぶと、学習もしやすくなります。
ステップ2：練習用 HTML ファイルを確認する
次に、Google Fonts を試すための 練習用 HTML ファイルを確認します。
このファイルに、あとで Google Fonts を読み込む設定を追加していきます。
ファイルをダウンロードしましょう。
zipファイルがダウンロードされるので、展開しましょう。
Zipファイルには、「sample.html」ファイルがあります。
HTMLファイルをテキストエディタで開いた時とブラウザで開いたときの内容を確認しましょう。
HTMLファイルの内容(テキストエディタで見た場合)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Fonts サンプル</title>
<!-- ここに Google Fonts の link タグを追加 -->
<style>
/* CSSを記述 */
body {
font-family: sans-serif;
background-color: #f5f5f5;
padding: 20px;
}
.box {
background-color: #ffffff;
padding: 20px;
margin-bottom: 20px;
border-radius: 8px;
}
/* 標準フォント */
.default-font {
font-family: sans-serif;
}
/* Google Fonts 用 */
.google-font {
}
</style>
</head>
<body>
<h1>Google Fonts 学習用サンプル</h1>
<div class="box default-font">
<h2>標準のフォント</h2>
<p>
この文章は、パソコンやスマートフォンに
最初から入っているフォントで表示されています。
</p>
</div>
<div class="box google-font">
<h2>Google Fonts を指定したフォント</h2>
<p>
この文章は、Google Fonts を使って
表示する予定の文章です。
</p>
</div>
<p>
※ このあと、head タグに link タグを追加し、
CSS の font-family を有効にして変化を確認します。
</p>
</body>
</html>
ブラウザの表示例
このHTMLファイルを使ってGoogle Fontsを指定していきます。
ポイントは、フォントの設定をしている24行目から32行目と、設定したフォントを使っている39行目、47行目です。
25行目からは標準のフォントの設定、30行目からは Google Fonts用 の設定だけど、31行目になにも記述されていないね。
あっ、だから、ブラウザで見ても標準フォントと Google Fonts の表示が同じに見えているのか！
このあとの流れ
- ① HTML に link タグを追加する
- ② CSS でフォントを指定する
