フォント-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 のサイトをつぎに示します。

Google Browse Fontsの使い方Google Browse Fonts - Webフォント サンプル

1. Google Browse Fontsの使い方

Google Browse Fonts API

読み込むためのLINKタグの書き方は、Google Browse Fonts API LINKタグおよびCSSの求め方を参照。
フォントを読み込むための基本的なLINKタグをつぎに示します。

<link href="https://fonts.googleapis.com/css2?family=フォントファミリ名&display=swap" rel="stylesheet">

LINKタグおとびCSS実例 - フォントOpen Sansのすべてのスタイルフォント

CSS

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

.font-sample1{
 font-family: 'フォントファミリ名';
 font-size: 50px;
 color: gray;
 font-weight: 400;
}

HTML

pタグ、divタグやspanタグで表示文字を定義します。

<span class="font-sample1">Almost before we knew it, we had left the ground.M</span>

まとめ

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

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8"/>
<title>Google Browse Fonts Open Sans - Bold 700 italic フォント デモ</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@1,700&display=swap" rel="stylesheet">
<style>
.font-sample1{ 
 font-family: 'Open Sans';
 font-weight: 700;
 font-size: 50px;
 color: #000000;
 font-style: normal;
}
</style>

</head>
<body>
<p class="font-sample1">Open Sans - Bold 700 italic Font demo</p>
</body>
</html>

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

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

2.1 英字サンプル

  1. Zen Loop
    Almost before we knew it, we had left the ground.M
  2. Qahiri
    Almost before we knew it, we had left the ground.M
  3. Noto Sans JP
    Almost before we knew it, we had left the ground.M
  4. Zen Tokyo Zoo
    Almost before we knew it, we had left the ground.M
  5. Didact Gothic(Futuraに近いGoogleフォント)
    Almost before we knew it, we had left the ground.M

2.2 日本語サンプル

  1. Noto Sans JP
    彼らの機器や装置はすべて生命体だ。
  2. Yomogi
    彼らの機器や装置はすべて生命体だ。
  3. Sawarabi Mincho
    彼らの機器や装置はすべて生命体だ。
  4. Sawarabi Gothic
    彼らの機器や装置はすべて生命体だ。
  5. Yusei Magic
    彼らの機器や装置はすべて生命体だ。

2.3 サンプルHTML

英字サンプル

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

<!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、 2 Yomogi、 3 Sawarabi Mincho、 4 Sawarabi Gothic および 5 Yusei Magic 各フォントのサンプルHTML を下に示します。HTMLはLINKタグおよびCSSについて、すべてのサンプルフォントについて定義しています。
フォント名のクリックでそのデモを新しいページに表示します。

<!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>

Google Browse Fontsの使い方Google Browse Fonts - Webフォント サンプルTOP



 最終更新日:2021. 7.22