serif系 フォント

serif系フォントは個人的に太いフォントは野暮ったく見えてしまう印象があるので、regularウェイトで細めのフォントをチョイスしました。

Abhaya Libre

https://fonts.google.com/specimen/Abhaya+Libre

Andada

https://fonts.google.com/specimen/Andada

Cormorant

https://fonts.google.com/specimen/Cormorant

Crimson Text

https://fonts.google.com/specimen/Crimson+Text

Esteban

https://fonts.google.com/specimen/Esteban

Old Standard TT

https://fonts.google.com/specimen/Old+Standard+TT

san-serif系 フォント

an-serif系は「主張しすぎず、だけどちゃんとアクセントになるような」をテーマにチョイスしました。

Asap

https://fonts.google.com/specimen/Asap

Athiti

https://fonts.google.com/specimen/Athiti

Nunito

https://fonts.google.com/specimen/Nunito

Roboto

https://fonts.google.com/specimen/Roboto

Strait

https://fonts.google.com/specimen/Strait

Ubuntu Condensed

https://fonts.google.com/specimen/Ubuntu+Condensed

goolg fontの使い方

使い方は本当にとっても簡単！あっという間です！

1. フォントをチョイス

当然ですがまずは使いたいフォントを決めましょう！
種類もたくさんあり、中には似たようなフォントもいくつかあるので、一度最後まで見てみるのをオススメします。

2. プラスマークでフォントを追加

使いたいフォントをクリックすると詳細ページに遷移します。右上にあるプラスマークをクリックしてフォント追加しましょう。

一度追加したフォントはあとから消せるのでとりあえず追加しておくのもありかもしれません。
ちなみに詳細ページではなく一覧ページからでも追加できますよ。

3. コードを取得

追加したフォントは右下にあるボックスに追加されています。ここに使用コードがでるのであとはコピペするだけ！

html・cssとお好きな方でお使いください。

私はcss派です。

複数のフォントをまとめて追加もできます。

また、ウェイトが複数あるフォントはウェイトも選べますよ。