Google Fontsをダウンロードして自分のウェブサイトでホスティングする
1 動機
日本語と英語の2言語対応のWebサイトの制作時に、次のような課題がありました。
- cssファイル中で
font-family: monospace;を利用している文字の見た目がlang=jaとlang=enで異なる
下図にその例を示します。Click me!のフォントはどちらもmonospaceですが、<html lang="ja">と<html lang="en">で表示されるフォントが異なることがわかります。
上図の比較したときのHTMLとCSSファイルで掲載します。
<!-- 日本語版のサイト -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>日本語版のサイト</title>
<link rel="stylesheet" href="../assets/css/style.css">
</head>
<body>
<h1>ようこそ</h1>
<a href="#">Click me!</p>
</body>
</html>
<!-- 英語版のサイト -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>英語版のサイト</title>
<link rel="stylesheet" href="../assets/css/style.css">
</head>
<body>
<h1>Welcome!</h1>
<a href="#">Click me!</p>
</body>
</html>
* {
line-height: 1;
font-family: monospace;
padding: 0;
margin: 0;
box-sizing: content-box;
}
h1 {
font-size: 32px;
line-height: 1.5;
}
セレクタ*は、全称セレクタまたはユニバーサルセレクタです。
monospaceは等幅フォントと呼ばれるもので、アルファベットによる文字幅の違いを吸収するために利用されます。プログラミング言語などを入力するテキストエディタ内でも等幅フォントが推奨されます。
<h1>要素のセレクタにline-height: 1.5を追加する理由は、フォントサイズ（32px）に対して、コンテンツ領域の高さを1.5倍（48px）に固定するためです。
2 Goole Fontsの利用
Google Fontsには、等幅フォントで、かつ英語/日本語ページの両方で同一の見た目を表示できるフォントファミリがあるそうです。そのフォントファミリをダウンロードし、自分でホスティングする手順をこれから説明します。
2.1 Google Fontsのダウンロード
Google Fonts にアクセスし、検索ボックスにRobot Monoと入力して、フィルタされた1件の候補を選択します。
右上のGet fontボタンをクリックするとダウンロードが始まります。
ダウンロードが完了したら、.zipファイルを展開します。フォント情報を含むファイルは拡張子.ttfのファイルに保存されています。
2.2 ファイル形式の変換
.ttfを.woff2に変換するため、Transfonter にアクセスします。Add fontsから先ほど解凍したファイルのうち使用するフォント (RobotoMono-Bold.ttfとRobotoMono-Regular.ttfとします)をアップロードし、下図の設定の状態でConvert (変換)を実行します。完了後、.zipファイルのダウンロードが始ます。
.zipファイルを解凍すると次のようなファイルが手元にできます。
2.3 プログラム変更
次のフォルダ構成になるように.woff2ファイルを配置します。
/assets/
/fonts/
/roboto-mono/
RobotoMono-Regular.woff2
RobotoMono-Bold.woff2
/css/
fonts-local.css
style.css
/en/
index.html
/ja/
index.html
fonts-local.cssを新規追加し、index.htmlとstyle.cssを書き換えます。
/* Roboto Mono */
@font-face {
font-family: "Roboto Mono Local";
src: url("../fonts/roboto-mono/RobotoMono-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Roboto Mono Local";
src: url("../fonts/roboto-mono/RobotoMono-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
<!-- 英語版のサイト -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>英語版のサイト</title>
<link rel="stylesheet" href="../assets/css/fonts-local.css">
<link rel="stylesheet" href="../assets/css/style.css">
</head>
<body>
<h1>Welcome!</h1>
<a href="#">Click me!</p>
</body>
</html>
<!-- 日本語版のサイト -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>日本語版のサイト</title>
<link rel="stylesheet" href="../assets/css/fonts-local.css">
<link rel="stylesheet" href="../assets/css/style.css">
</head>
<body>
<h1>ようこそ</h1>
<a href="#">Click me!</p>
</body>
</html>
* {
line-height: 1;
font-family: 'Roboto Mono Local';
padding: 0;
margin: 0;
box-sizing: content-box;
}
h1 {
font-size: 32px;
line-height: 1.5;
}
3 結果
編集後の/en/index.htmlと/ja/index.htmlを再度見比べてみます。Click me!の見た目が同じになりました。
