覚えておきたい Google Font 15選。　web制作で使えそうなフォントを集めてみました。

## はじめに
google font にはいろいろな種類があり、その中でも使えそうなものを選び紹介しました。
基本的なフォントから、ポップなフォントや書道の筆で書いたようなフォント、
特徴的なファンタジーなフォントや、スタイリッシュなフォントもあります。

## Noto Sans Japanese
### 説明
Google と Adobe が共同で開発したフォントです。
常に読みやすいデザインが特徴で、連続した文章でも読みやすいとされています。

![３.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3832781/dde6f717-b48c-d32e-1f7e-9709bfe692be.png)

### コード例
``` html
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<style>
  body {
    font-family: 'Noto Sans JP', sans-serif;
  }
</style>
```
https://fonts.google.com/noto/specimen/Noto+Sans+JP

<br>

## Noto Serif Japanese
### 説明
こちらもGoogle と Adobe が共同で開発したフォントです。
細部まで丁寧にデザインされた字形は、高い可読性と美しさを兼ね備えています。

![４.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3832781/c45f6e3e-e046-01d3-6f92-896788e9ced9.png)


### コード例
``` html
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" rel="stylesheet">
<style>
  body {
    font-family: 'Noto Serif JP', serif;
  }
</style>
```
https://fonts.google.com/noto/specimen/Noto+Serif+JP

<br>

## Mochiy Pop One
### 説明
ポップなデザインが特徴です。
丸みを帯びた文字の形状が親しみやすく、カジュアルな雰囲気を演出できます。

![５.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3832781/539b1125-1912-ad9a-febf-cefbff6b9677.png)

### コード例
``` html
<link href="https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap" rel="stylesheet">
<style>
  body {
    font-family: 'Mochiy Pop One', sans-serif;
  }
</style>
```
https://fonts.google.com/specimen/Mochiy+Pop+One

似たカジュアルなフォントで以下のRocknRoll Oneというものもあります。

https://fonts.google.com/specimen/RocknRoll+One

<br>

## Zen Kurenaido
### 説明
このフォントは、手書き風でありながら、スタイリッシュなデザインをしています。
伝統的な美しさを保ちながらも現代的なアプローチで仕上げられています。

![６.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3832781/db18b9e6-9c44-db3c-3488-c9f5840c9a4e.png)

### コード例
``` html
<link href="https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap" rel="stylesheet">
<style>
  body {
    font-family: 'Zen Kurenaido', serif;
  }
</style>
```
https://fonts.google.com/specimen/Zen+Kurenaido

<br>

## Yuji Syuku
### 説明
書道のような力強いフォントです。

![１０.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3832781/d899c8f3-cbef-a3ce-9b28-002fdad96d74.png)

### コード例
``` html
<link href="https://fonts.googleapis.com/css2?family=Yuji+Syuku&display=swap" rel="stylesheet">
<style>
  body {
    font-family: 'Yuji Syuku', serif;
  }
</style>
```
https://fonts.google.com/specimen/Yuji+Syuku

<br>


## Amatic SC
### 説明
Amatic SC は、手書きのような外観を持つフォントであり、カジュアルで親しみやすい雰囲気が特徴です。

![１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3832781/cd4f9256-cede-f822-351e-c2e357a2e66a.png)
### コード例
``` html
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
<style>
  body {
    font-family: 'Amatic SC', cursive;
  }
</style>
```
https://fonts.google.com/specimen/Amatic+SC


<br>

## UnifrakturMaguntia
### 説明
UnifrakturMaguntia は、フラクトゥール書体に基づいています。
中世ヨーロッパの書籍や文書を思わせるデザインです。

![７.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3832781/07c9c198-2d0f-7eb5-b041-6cde12232d5a.png)

### コード例
``` html
<link href="https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap" rel="stylesheet">
<style>
  body {
    font-family: 'UnifrakturMaguntia', cursive;
  }
</style>
```
https://fonts.google.com/specimen/UnifrakturMaguntia

<br>

## MonteCarlo
### 説明
エレガントな印象を持たせたいブランドやプロジェクトのロゴに使用されます。
特にファッション、インテリア、ライフスタイル関連のウェブサイトで使用されます。

![８.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3832781/110b4593-d1ea-c42a-0417-c703a62d4362.png)

### コード例
``` html
<link href="https://fonts.googleapis.com/css2?family=MonteCarlo&display=swap" rel="stylesheet">
<style>
  body {
    font-family: 'MonteCarlo', cursive;
  }
</style>
```
https://fonts.google.com/specimen/MonteCarlo

<br>



## Uncial Antiqua
### 説明
アンシャル書体をベースにしたフォントです。
歴史的なテーマのイベントポスター、展示会の資料などで使用されます。

![９.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3832781/e80b5ede-f941-2e46-d64c-3835cd5bfa8e.png)

### コード例
``` html
<link href="https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap" rel="stylesheet">
<style>
  body {
    font-family: 'Uncial Antiqua', serif;
  }
</style>
```
https://fonts.google.com/specimen/Uncial+Antiqua

<br>

## Nosifer
### 説明
ホラーやサスペンス、特殊なテーマのデザインに最適です。
滴やスプラッタの装飾が施されており、タイトルや見出しに使用することで、強い印象を与えます。

![１１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3832781/99d3aeb3-d2cd-1dae-ec43-de76922fa304.png)

### コード例
``` html
<link href="https://fonts.googleapis.com/css2?family=Nosifer&display=swap" rel="stylesheet">
<style>
  body {
    font-family: 'Nosifer', cursive;
  }
</style>
```
https://fonts.google.com/specimen/Nosifer

似たフォント

https://fonts.google.com/specimen/Rubik+Wet+Paint

<br>


## Mystery Quest
### 説明
冒険やミステリー、ファンタジーの世界観を反映するようにデザインされています。
ステリーに関連するデザインなどで活用されます。

![１２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3832781/40b9f6ab-5373-953b-12c0-0cb458fd28c6.png)

### コード例
``` html
<link href="https://fonts.googleapis.com/css2?family=Mystery+Quest&display=swap" rel="stylesheet">
<style>
  body {
    font-family: 'Mystery Quest', cursive;
  }
</style>
```
https://fonts.google.com/specimen/Mystery+Quest

<br>

## Metal Mania
### 説明
メタル音楽のスタイルに合わせた装飾が施されており、力強く、エネルギッシュな印象を与えます。

![１３.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3832781/b8a04e42-421e-d26f-adf2-0b733ea7c286.png)

### コード例
``` html
<link href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap" rel="stylesheet">
<style>
  body {
    font-family: 'Metal Mania', cursive;
  }
</style>
```
https://fonts.google.com/specimen/Metal+Mania

<br>

## Castoro Titling
### 説明
書籍や雑誌、ポスター、広告などのタイトルや見出しに最適です。

![１４.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3832781/63974be2-537a-e620-1b24-077fe2b24115.png)

### コード例
``` html
<link href="https://fonts.googleapis.com/css2?family=Castoro+Titling&display=swap" rel="stylesheet">
<style>
  body {
    font-family: 'Castoro Titling', serif;
  }
</style>
```
https://fonts.google.com/specimen/Castoro+Titling

<br>

## 最後に
アルファベットのシンプルなフォントはすぐに見つかるので、あえて特徴的なものを集めてみました。
私自身のメモとしても使っていくつもりなので、随時追加されていくかもしれません。