初めに
今回はGoogleフォントの使用方法がいまいち理解できていなかったので簡単にまとめてみたいと思います。
Googleフォントを使用するときは、HTMLの<link>タグだけでなく、CSSでの指定も必要になります。この点の理解が不十分だったので💦
こちらのサイトで動作確認できます
以下に示すコードを自分の手元で試してみたい方はこちらのサイトを利用されてみる事をお勧めします。
したかった事
今回ミニアプリを作成するにあたり、ヘッダーのロゴをクリックするごとにタイトルのフォントが変更するような実装をしてみました。
コードを抜粋、少し修正して紹介します。
⚠️必要最小限のコードになります
まずは好みのGoogleフォントを選択
選択したら下記画面に移動し「Get embed code」を選択します
次に下記のような画面が表示されます。
ここでは「<head>にこのコードを入れてね」と「cssファイルにこのコードを入れてね」というものが明示されています。
下準備はここまでで、以下からがHTMLとJS、CSSに記載するコードになります（あくまで例）
HTML
「Googleフォントの読込」で、<link>の場合を挙げていますが、この部分は@importのもので記述しても同じように動作します。
コードをシンプルにしたい場合は、@importの方が適しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Googleフォント切り替え</title>
<!-- Google Fonts の読み込み -->
<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=Black+Ops+One&family=Honk:SHLN@49.2&family=Palette+Mosaic&family=Turret+Road:wght@200&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<script defer src="script.js"></script>
</head>
<body>
<header>
<img id="logo-btn" src="logo.png" alt="ロゴ" class="logo">
</header>
<main>
<h1 id="title">Google-fontで遊ぼう！</h1>
</main>
</body>
</html>
Javascript
ロゴボタンをクリックごとに変更する設定。
「Math」オブジェクトの「random()」メソッドを使用します。
「floor()」メソッドを使用する事で、小数点以下をバッサリと切り捨てる事ができ整数が取得できます。
また「random」メソッドに掛けるものを「配列の要素数」であるfonts.lengthにする事で、要素数よりも大きな値を指定して配列の要素が存在しないエラーになる事を防ぐことができます。
document.addEventListener("DOMContentLoaded", () => {
console.log("ページが読み込まれました！");
// フォントの候補リスト
const fonts = [
"Black Ops One, cursive",
"Honk, sans-serif",
"Palette Mosaic, cursive",
"Turret Road, sans-serif"
];
// ロゴボタンの取得
const logoBtn = document.getElementById("logo-btn");
const title = document.getElementById("title");
// ロゴをクリックしたらフォントを変更
logoBtn.addEventListener("click", () => {
const randomFont = fonts[Math.floor(Math.random() * fonts.length)];
title.style.fontFamily = randomFont;
console.log(`フォント変更: ${randomFont}`);
});
});
CSS
Googleフォントを選択した後、「code」セクションに表示されるCSSをそのままコピー＆ペーストすればOKです。
ただし、実際に適用されるかどうかを確かめるため、今回は最低限のコードのみにしてみました
/* 各フォントの設定 */
.black-ops {
font-family: "Black Ops One", cursive;
}
.honk {
font-family: "Honk", sans-serif;
}
.palette-mosaic {
font-family: "Palette Mosaic", cursive;
}
.turret-road {
font-family: "Turret Road", sans-serif;
font-weight: 200;
}
おまけ
const fonts = [
"Black Ops One, cursive",
"Honk, sans-serif",
"Palette Mosaic, cursive",
"Turret Road, sans-serif"
];
上記配列で フォント名だけでなくcursiveやsans-serifも含めて書いていることについて。
👆こちらのサイトからもわかるように、もしBlack Ops Oneが何らかの理由で適用されなかったらcursiveというカテゴリのフォントが適用されるという事になります。
一部紹介
| 指定する値 | 説明 |
|---|---|
| serif | 明朝体や、文字の端に飾り（セリフ）があるフォント |
| sans-serif | ゴシック体や、文字の端に飾りがないフォント |
| cursive | 筆記体（流れるようなスクリプトフォント） |
| monospace | すべての文字の幅が同じ固定幅フォント |
| fantasy | 装飾的なデザインフォント |
最後に
「どのファイルにどのコードを配置するのか？」という点を整理しておくと、今後Googleフォントを使用する際、スムーズに実装できるのかな、と思いました。
注意点 として、日本語のフォントはそのまま使用できるものもあれば、英語フォントのように記述しないと適用されないものもあります。Googleが海外の企業であるため、英語が基本になっているのは仕方ないですね…😢