知識の枝

"All is well"

htmlのフォントを変更する

約408日前 2020年10月14日18:49
デジタル
HTML CSS

改訂履歴


2020/10/14 投稿

1. 背景


以前、404 Not Foundページを作成した際にフォントを指定し忘れていたことに気付き、
適切なフォントを適用することにしました。

2. ゴール


html上でフォントを読み込み、文字のフォントを変更する。

3. はじめに


今回はこのページのフォントを変更したいと思います。
リンク:404_not_found




4. フォント変更方法


4.1 - Google Fonts


フォントを変更するには、まずhtmlファイルでフォントを読み込む必要があります。
そんなときに便利なのがGoogle Fontsです。

Google Fonts

上記のリンク先に移動するとフォントの検索画面が表示されます。



今回使うのは「Space mono」というフォントです。
検索窓で自分が気になるフォントを検索しても良いですし、
そのまま画面を下にスクロールして気に入るフォントを探してみるのも良いと思います。



目的のフォントが見つかったらフォントの詳細ページに移動しましょう。



同じフォントでも何種類か候補が表示されます。
「Space mono」だと4つでてきます。

基本的には1番上のものが最も基本的な書体です。
今回の例では下記4種がでてきます。
・Regular 400(基本)
・Regular 400 italic
・Bold 700
・Bold 700 italic

「italic」は文字が斜めになっているやつです。
「Bold」は太字です。
「400」や「700」は「font-weight」と呼ばれるもので、文字の太さを表します。
400は基本的な太さ、700は太字です。
「Regular 400」と「Bold 700」はそれぞれ同じことを2回繰り返して書いてあるだけです。

書体を決めたら右側の「Select this style」をクリックして下さい。
右側にウィンドウが出ます。



「Enbed」をクリックすると<link>タグがコピーできるようになるので、コピーしましょう。

Google fontsでの作業は以上です。

4.2 - フォントの読み込み


4.1項で選択したフォントを自分のhtmlに読み込ませましょう。

<head>タグ内に先ほどコピーした<link>タグをペーストします。

<head>
<meta charset="utf-8" />
<title>404 Not Found</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>

<link href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap" rel="stylesheet"> #ここ

<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
</head>

ペーストする場所はCSSの読み込みより前にしましょう。
(どこかのホームページにそうしましょうと書いてあったような気がするので・・・)

これでhtmlにフォントが読み込まれます。

4.3 - フォントを適用させる


先ほどのフォントを適用させたい文章が含まれるタグに
「style="font-family: 'Space Mono';"」
を記載します。

書き方は下記のような感じです。
【フォント適用前】
<h1>I have bad news for you</h1>

【フォント適用後】
<h1 style="font-family: 'Space Mono';">I have bad news for you</h1>


更に文字の太さを変えたい場合は上記に追加で
「style="font-weight: 700;"」
を指定するとできます。

【フォント&太字適用後】
<h1 style="font-family: 'Space Mono'; font-weight: 700;">I have bad news for you</h1>


5. さいごに


フォントは何種類でもhtmlに読み込ませることが可能です。
Google Fontsで複数フォントを選択した状態でEmbedから<link>タグをコピーしましょう。

以上です。お疲れ様でした。