フォント-FontをWebフォントとして使いたい時は、ダウンロードやインストール不要のGoogle Browse Fonts APIを使おう！

かってはWebページの文字の表示は、閲覧者が使用するPCにインストールされているフォントを用いて文字を表示させるが一般的でした。
このため、異なるOSや閲覧者のPCフォントが無い場合、別のフォントが代用表示される問題がありました。
しかし、Webフォントの技術の登場（2010～2015年）によりネットワーク上からフォントデータを読み込み、閲覧者が使用するPCに関係なく、指定のフォントで文字を表示することが可能になりました。
それは、Googleが提供するWebフォントのAPI Google Browse Fontsが実現してくれます。
Google Browse Fontsは、フリーで様々な言語のフォントに対応しています。

Google Browse Fonts のサイトをつぎに示します。

1. Google Browse Fontsの使い方

Google Browse Fonts API

CSS

定義するフォントファミリ名は、上記「Google Browse Fonts API LINKタグおよびCSSの求め方」を参照。

HTML

まとめ

これまでのコードなどをまとめたHTML全体コードを示します。
まとめHTMLのデモは、こちら。

2. Google Browse Fonts - Webフォントサンプル

ここに示すWebフォントサンプルは、つぎに示すGoogle Browse Fontsサイトから参照・引用しています。

2.1 英字サンプル

2.2 日本語サンプル

2.3 サンプルHTML

英字サンプル

１ Zen Loop、２ Qahiri、３ Noto Sans JP、４ Zen-Tokyo-Zoo および５ Didact Gothic 各フォントのサンプルHTML を下に示します。HTMLはLINKタグおよびCSSについて、すべてのサンプルフォントについて定義しています。
フォント名のクリックでそのデモを新しいページに表示します。

１ Zen Loop
２ Qahiri
３ Noto Sans JP
４ Zen-Tokyo-Zoo
５ Didact Gothic

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>フォント-FontをWebフォントとして使いたい時は、ダウンロードやインストール不要のGoogle Browse Fontsを使う！</title>

<!--英字 Google Browse Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Zen+Loop&display=swap" rel="stylesheet"> <!-- Zen Loop -->
<link href="https://fonts.googleapis.com/css2?family=Qahiri&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">
<!-- 日本語 Google Browse Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Yomogi&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap" rel="stylesheet">

<!-- Google Browse Fonts -->
<style>

/*Zen Loop*/
.zen-Loop{
 font-family: 'Zen Loop';
 font-size: 50px;
 color: gray;
 font-weight: 400;

}
/* Qahiri */
.qahiri{
 font-family: 'Qahiri';
font-size: 45px;
color: #c09b0f;
}
/*Noto Sans JP*/
.notosans-jp{
 font-family: 'Noto Sans JP';
font-size: 45px;
color: #c09b0f;
}
/*Zen Tokyo Zoo*/
.zen-tokyo-zoo{
 font-family: 'Zen Tokyo Zoo';
font-size: 45px;
color: #000000;
}
/*Futura*/
.futura{
 font-family: 'Didact Gothic';  /* Futura 擬き */
font-size: 45px;
color: #000000;
}
/*Yomogi*/
.yomogi{
 font-family: 'Yomogi';
font-size: 50px;
color: #000000;
}

/* Sawarabi Mincho  */
.sawarabi-mincho{
 font-family: 'Sawarabi Mincho';
font-size: 50px;
color: #000000;
}
/* Sawarabi Gothic */
.sawarabi-gothic{
 font-family: 'Sawarabi Gothic';
font-size: 50px;
color: #000000;
}
/* Yusei Magic */
.yusei-magic{
 font-family: 'Yusei Magic';
font-size: 50px;
color: #000000;
}
</style>

</head>
<body>
<p class="zen-Loop">Zen Loop<br>Almost before we knew it, we had left the ground.M</p>

</body>
</html>

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>フォント-FontをWebフォントとして使いたい時は、ダウンロードやインストール不要のGoogle Browse Fontsを使う！</title>

<!--英字 Google Browse Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Zen+Loop&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Qahiri&display=swap" rel="stylesheet">   <!-- Qahiri -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">
<!-- 日本語 Google Browse Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Yomogi&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap" rel="stylesheet">

<!-- Google Browse Fonts -->
<style>
/*Zen Loop*/
.zen-Loop{
 font-family: 'Zen Loop';
 font-size: 50px;
 color: gray;
 font-weight: 400;

}
/* Qahiri */
.qahiri{
 font-family: 'Qahiri';
font-size: 45px;
color: #c09b0f;
}
/*Noto Sans JP*/
.notosans-jp{
 font-family: 'Noto Sans JP';
font-size: 45px;
color: #c09b0f;
}
/*Zen Tokyo Zoo*/
.zen-tokyo-zoo{
 font-family: 'Zen Tokyo Zoo';
font-size: 45px;
color: #000000;
}
/*Futura*/
.futura{
 font-family: 'Didact Gothic';  /* Futura 擬き */
font-size: 45px;
color: #000000;
}
/*Yomogi*/
.yomogi{
 font-family: 'Yomogi';
font-size: 50px;
color: #000000;
}

/* Sawarabi Mincho  */
.sawarabi-mincho{
 font-family: 'Sawarabi Mincho';
font-size: 50px;
color: #000000;
}
/* Sawarabi Gothic */
.sawarabi-gothic{
 font-family: 'Sawarabi Gothic';
font-size: 50px;
color: #000000;
}
/* Yusei Magic */
.yusei-magic{
 font-family: 'Yusei Magic';
font-size: 50px;
color: #000000;
}
</style>

</head>
<body>
   <p class="qahiri">Qahiri<br>Almost before we knew it, we had left the ground.M</p>

</body>
</html>

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>フォント-FontをWebフォントとして使いたい時は、ダウンロードやインストール不要のGoogle Browse Fontsを使う！</title>

<!--英字 Google Browse Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Zen+Loop&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Qahiri&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">  <!-- Noto Sans JP -->
<link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">
<!-- 日本語 Google Browse Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Yomogi&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap" rel="stylesheet">

<!-- Google Browse Fonts -->
<style>
/*Zen Loop*/
.zen-Loop{
 font-family: 'Zen Loop';
 font-size: 50px;
 color: gray;
 font-weight: 400;

}
/* Qahiri */
.qahiri{
 font-family: 'Qahiri';
font-size: 45px;
color: #c09b0f;
}
/*Noto Sans JP*/
.notosans-jp{
 font-family: 'Noto Sans JP';
font-size: 45px;
color: #c09b0f;
}
/*Zen Tokyo Zoo*/
.zen-tokyo-zoo{
 font-family: 'Zen Tokyo Zoo';
font-size: 45px;
color: #000000;
}
/*Futura*/
.futura{
 font-family: 'Didact Gothic';  /* Futura 擬き */
font-size: 45px;
color: #000000;
}
/*Yomogi*/
.yomogi{
 font-family: 'Yomogi';
font-size: 50px;
color: #000000;
}

/* Sawarabi Mincho  */
.sawarabi-mincho{
 font-family: 'Sawarabi Mincho';
font-size: 50px;
color: #000000;
}
/* Sawarabi Gothic */
.sawarabi-gothic{
 font-family: 'Sawarabi Gothic';
font-size: 50px;
color: #000000;
}
/* Yusei Magic */
.yusei-magic{
 font-family: 'Yusei Magic';
font-size: 50px;
color: #000000;
}
</style>

</head>
<body>
<p class="notosans-jp">Noto Sans JP<br>Almost before we knew it, we had left the ground.M</p>

</body>
</html>

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>フォント-FontをWebフォントとして使いたい時は、ダウンロードやインストール不要のGoogle Browse Fontsを使う！</title>

<!--英字 Google Browse Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Zen+Loop&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Qahiri&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">  <!-- Zen Tokyo Zoo -->
<link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">
<!-- 日本語 Google Browse Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Yomogi&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap" rel="stylesheet">

<!-- Google Browse Fonts -->
<style>
/*Zen Loop*/
.zen-Loop{
 font-family: 'Zen Loop';
 font-size: 50px;
 color: gray;
 font-weight: 400;

}
/* Qahiri */
.qahiri{
 font-family: 'Qahiri';
font-size: 45px;
color: #c09b0f;
}
/*Noto Sans JP*/
.notosans-jp{
 font-family: 'Noto Sans JP';
font-size: 45px;
color: #c09b0f;
}
/*Zen Tokyo Zoo*/
.zen-tokyo-zoo{
 font-family: 'Zen Tokyo Zoo';
font-size: 45px;
color: #000000;
}
/*Futura*/
.futura{
 font-family: 'Didact Gothic';  /* Futura 擬き */
font-size: 45px;
color: #000000;
}
/*Yomogi*/
.yomogi{
 font-family: 'Yomogi';
font-size: 50px;
color: #000000;
}

/* Sawarabi Mincho  */
.sawarabi-mincho{
 font-family: 'Sawarabi Mincho';
font-size: 50px;
color: #000000;
}
/* Sawarabi Gothic */
.sawarabi-gothic{
 font-family: 'Sawarabi Gothic';
font-size: 50px;
color: #000000;
}
/* Yusei Magic */
.yusei-magic{
 font-family: 'Yusei Magic';
font-size: 50px;
color: #000000;
}
</style>

</head>
<body>
<p class="zen-tokyo-zoo">Zen-Tokyo-Zoo<br>Almost before we knew it, we had left the ground.M</p>

</body>
</html>

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>フォント-FontをWebフォントとして使いたい時は、ダウンロードやインストール不要のGoogle Browse Fontsを使う！</title>

<!--英字 Google Browse Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Zen+Loop&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Qahiri&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">  <!-- Didact Gothic -->
<!-- 日本語 Google Browse Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Yomogi&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap" rel="stylesheet">  

<!-- Google Browse Fonts -->
<style>
/*Zen Loop*/
.zen-Loop{
 font-family: 'Zen Loop';
 font-size: 50px;
 color: gray;
 font-weight: 400;

}
/* Qahiri */
.qahiri{
 font-family: 'Qahiri';
font-size: 45px;
color: #c09b0f;
}
/*Noto Sans JP*/
.notosans-jp{
 font-family: 'Noto Sans JP';
font-size: 45px;
color: #c09b0f;
}
/*Zen Tokyo Zoo*/
.zen-tokyo-zoo{
 font-family: 'Zen Tokyo Zoo';
font-size: 45px;
color: #000000;
}
/*Futura*/
.futura{
 font-family: 'Didact Gothic';  /* Futura 擬き */
font-size: 45px;
color: #000000;
}
/*Yomogi*/
.yomogi{
 font-family: 'Yomogi';
font-size: 50px;
color: #000000;
}

/* Sawarabi Mincho  */
.sawarabi-mincho{
 font-family: 'Sawarabi Mincho';
font-size: 50px;
color: #000000;
}
/* Sawarabi Gothic */
.sawarabi-gothic{
 font-family: 'Sawarabi Gothic';
font-size: 50px;
color: #000000;
}
/* Yusei Magic */
.yusei-magic{
 font-family: 'Yusei Magic';
font-size: 50px;
color: #000000;
}
</style>

</head>
<body>
<p class="futura">Didact Gothic<br>Almost before we knew it, we had left the ground.M</p>

</body>
</html>

日本語サンプル

１ Noto Sans JP、２ Yomogi、３ Sawarabi Mincho、４ Sawarabi Gothic および５ Yusei Magic 各フォントのサンプルHTML を下に示します。HTMLはLINKタグおよびCSSについて、すべてのサンプルフォントについて定義しています。
フォント名のクリックでそのデモを新しいページに表示します。

１ Noto Sans JP
２ Yomogi
３ Sawarabi Mincho
４ Sawarabi Gothic
５ Yusei Magic

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>フォント-FontをWebフォントとして使いたい時は、ダウンロードやインストール不要のGoogle Browse Fontsを使う！</title>

<!--英字 Google Browse Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Zen+Loop&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Qahiri&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet"> <!-- Noto Sans JP -->
<link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">
<!-- 日本語 Google Browse Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Yomogi&display=swap" rel="stylesheet">  
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap" rel="stylesheet">

<!-- Google Browse Fonts -->
<style>
/*Zen Loop*/
.zen-Loop{
 font-family: 'Zen Loop';
 font-size: 50px;
 color: gray;
 font-weight: 400;

}
/* Qahiri */
.qahiri{
 font-family: 'Qahiri';
font-size: 45px;
color: #c09b0f;
}
/*Noto Sans JP*/
.notosans-jp{
 font-family: 'Noto Sans JP';
font-size: 45px;
color: #c09b0f;
}
/*Zen Tokyo Zoo*/
.zen-tokyo-zoo{
 font-family: 'Zen Tokyo Zoo';
font-size: 45px;
color: #000000;
}
/*Futura*/
.futura{
 font-family: 'Didact Gothic';  /* Futura 擬き */
font-size: 45px;
color: #000000;
}
/*Yomogi*/
.yomogi{
 font-family: 'Yomogi';
font-size: 50px;
color: #000000;
}

/* Sawarabi Mincho  */
.sawarabi-mincho{
 font-family: 'Sawarabi Mincho';
font-size: 50px;
color: #000000;
}
/* Sawarabi Gothic */
.sawarabi-gothic{
 font-family: 'Sawarabi Gothic';
font-size: 50px;
color: #000000;
}
/* Yusei Magic */
.yusei-magic{
 font-family: 'Yusei Magic';
font-size: 50px;
color: #000000;
}
</style>

</head>
<body>
<p class="notosans-jp">Noto Sans JP<br>彼らの機器や装置はすべて生命体だ。</p>

</body>
</html>

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>フォント-FontをWebフォントとして使いたい時は、ダウンロードやインストール不要のGoogle Browse Fontsを使う！</title>

<!--英字 Google Browse Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Zen+Loop&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Qahiri&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">
<!-- 日本語 Google Browse Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Yomogi&display=swap" rel="stylesheet">  <!-- Yomogi -->
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap" rel="stylesheet">

<!-- Google Browse Fonts -->
<style>
/*Zen Loop*/
.zen-Loop{
 font-family: 'Zen Loop';
 font-size: 50px;
 color: gray;
 font-weight: 400;

}
/* Qahiri */
.qahiri{
 font-family: 'Qahiri';
font-size: 45px;
color: #c09b0f;
}
/*Noto Sans JP*/
.notosans-jp{
 font-family: 'Noto Sans JP';
font-size: 45px;
color: #c09b0f;
}
/*Zen Tokyo Zoo*/
.zen-tokyo-zoo{
 font-family: 'Zen Tokyo Zoo';
font-size: 45px;
color: #000000;
}
/*Futura*/
.futura{
 font-family: 'Didact Gothic';  /* Futura 擬き */
font-size: 45px;
color: #000000;
}
/*Yomogi*/
.yomogi{
 font-family: 'Yomogi';
font-size: 50px;
color: #000000;
}

/* Sawarabi Mincho  */
.sawarabi-mincho{
 font-family: 'Sawarabi Mincho';
font-size: 50px;
color: #000000;
}
/* Sawarabi Gothic */
.sawarabi-gothic{
 font-family: 'Sawarabi Gothic';
font-size: 50px;
color: #000000;
}
/* Yusei Magic */
.yusei-magic{
 font-family: 'Yusei Magic';
font-size: 50px;
color: #000000;
}
</style>

</head>
<body>
<p class="yomogi">Yomogi<br>彼らの機器や装置はすべて生命体だ。</p>

</body>
</html>

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>フォント-FontをWebフォントとして使いたい時は、ダウンロードやインストール不要のGoogle Browse Fontsを使う！</title>

<!--英字 Google Browse Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Zen+Loop&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Qahiri&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">
<!-- 日本語 Google Browse Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Yomogi&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap" rel="stylesheet">  <!-- Sawarabi Mincho -->
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap" rel="stylesheet">

<!-- Google Browse Fonts -->
<style>
/*Zen Loop*/
.zen-Loop{
 font-family: 'Zen Loop';
 font-size: 50px;
 color: gray;
 font-weight: 400;

}
/* Qahiri */
.qahiri{
 font-family: 'Qahiri';
font-size: 45px;
color: #c09b0f;
}
/*Noto Sans JP*/
.notosans-jp{
 font-family: 'Noto Sans JP';
font-size: 45px;
color: #c09b0f;
}
/*Zen Tokyo Zoo*/
.zen-tokyo-zoo{
 font-family: 'Zen Tokyo Zoo';
font-size: 45px;
color: #000000;
}
/*Futura*/
.futura{
 font-family: 'Didact Gothic';  /* Futura 擬き */
font-size: 45px;
color: #000000;
}
/*Yomogi*/
.yomogi{
 font-family: 'Yomogi';
font-size: 50px;
color: #000000;
}

/* Sawarabi Mincho  */
.sawarabi-mincho{
 font-family: 'Sawarabi Mincho';
font-size: 50px;
color: #000000;
}
/* Sawarabi Gothic */
.sawarabi-gothic{
 font-family: 'Sawarabi Gothic';
font-size: 50px;
color: #000000;
}
/* Yusei Magic */
.yusei-magic{
 font-family: 'Yusei Magic';
font-size: 50px;
color: #000000;
}
</style>

</head>
<body>
<p class="sawarabi-mincho">Sawarabi Mincho<br>彼らの機器や装置はすべて生命体だ。</p>

</body>
</html>

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>フォント-FontをWebフォントとして使いたい時は、ダウンロードやインストール不要のGoogle Browse Fontsを使う！</title>

<!--英字 Google Browse Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Zen+Loop&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Qahiri&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">
<!-- 日本語 Google Browse Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Yomogi&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet">  <!-- Sawarabi Gothic -->
<link href="https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap" rel="stylesheet">

<!-- Google Browse Fonts -->
<style>
/*Zen Loop*/
.zen-Loop{
 font-family: 'Zen Loop';
 font-size: 50px;
 color: gray;
 font-weight: 400;

}
/* Qahiri */
.qahiri{
 font-family: 'Qahiri';
font-size: 45px;
color: #c09b0f;
}
/*Noto Sans JP*/
.notosans-jp{
 font-family: 'Noto Sans JP';
font-size: 45px;
color: #c09b0f;
}
/*Zen Tokyo Zoo*/
.zen-tokyo-zoo{
 font-family: 'Zen Tokyo Zoo';
font-size: 45px;
color: #000000;
}
/*Futura*/
.futura{
 font-family: 'Didact Gothic';  /* Futura 擬き */
font-size: 45px;
color: #000000;
}
/*Yomogi*/
.yomogi{
 font-family: 'Yomogi';
font-size: 50px;
color: #000000;
}

/* Sawarabi Mincho  */
.sawarabi-mincho{
 font-family: 'Sawarabi Mincho';
font-size: 50px;
color: #000000;
}
/* Sawarabi Gothic */
.sawarabi-gothic{
 font-family: 'Sawarabi Gothic';
font-size: 50px;
color: #000000;
}
/* Yusei Magic */
.yusei-magic{
 font-family: 'Yusei Magic';
font-size: 50px;
color: #000000;
}
</style>

</head>
<body>
<p class="sawarabi-gothic">Sawarabi Gothic<br>彼らの機器や装置はすべて生命体だ。</p>

</body>
</html>

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>フォント-FontをWebフォントとして使いたい時は、ダウンロードやインストール不要のGoogle Browse Fontsを使う！</title>

<!--英字 Google Browse Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Zen+Loop&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Qahiri&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">
<!-- 日本語 Google Browse Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Yomogi&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap" rel="stylesheet">  <!-- Yusei Magic -->

<!-- Google Browse Fonts -->
<style>
/*Zen Loop*/
.zen-Loop{
 font-family: 'Zen Loop';
 font-size: 50px;
 color: gray;
 font-weight: 400;

}
/* Qahiri */
.qahiri{
 font-family: 'Qahiri';
font-size: 45px;
color: #c09b0f;
}
/*Noto Sans JP*/
.notosans-jp{
 font-family: 'Noto Sans JP';
font-size: 45px;
color: #c09b0f;
}
/*Zen Tokyo Zoo*/
.zen-tokyo-zoo{
 font-family: 'Zen Tokyo Zoo';
font-size: 45px;
color: #000000;
}
/*Futura*/
.futura{
 font-family: 'Didact Gothic';  /* Futura 擬き */
font-size: 45px;
color: #000000;
}
/*Yomogi*/
.yomogi{
 font-family: 'Yomogi';
font-size: 50px;
color: #000000;
}

/* Sawarabi Mincho  */
.sawarabi-mincho{
 font-family: 'Sawarabi Mincho';
font-size: 50px;
color: #000000;
}
/* Sawarabi Gothic */
.sawarabi-gothic{
 font-family: 'Sawarabi Gothic';
font-size: 50px;
color: #000000;
}
/* Yusei Magic */
.yusei-magic{
 font-family: 'Yusei Magic';
font-size: 50px;
color: #000000;
}
</style>

</head>
<body>
<p class="yusei-magic">Yusei Magic<br>彼らの機器や装置はすべて生命体だ。</p>

</body>
</html>

フォント-FontをWebフォントとして使いたい時は、 ダウンロードやインストール不要のGoogle Browse Fonts APIを使おう！