はじめに
google font にはいろいろな種類があり、その中でも使えそうなものを選び紹介しました。
基本的なフォントから、ポップなフォントや書道の筆で書いたようなフォント、
特徴的なファンタジーなフォントや、スタイリッシュなフォントもあります。
Noto Sans Japanese
説明
Google と Adobe が共同で開発したフォントです。
常に読みやすいデザインが特徴で、連続した文章でも読みやすいとされています。
コード例
<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>
Noto Serif Japanese
説明
こちらもGoogle と Adobe が共同で開発したフォントです。
細部まで丁寧にデザインされた字形は、高い可読性と美しさを兼ね備えています。
コード例
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Noto Serif JP', serif;
}
</style>
Mochiy Pop One
説明
ポップなデザインが特徴です。
丸みを帯びた文字の形状が親しみやすく、カジュアルな雰囲気を演出できます。
コード例
<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>
似たカジュアルなフォントで以下のRocknRoll Oneというものもあります。
Zen Kurenaido
説明
このフォントは、手書き風でありながら、スタイリッシュなデザインをしています。
伝統的な美しさを保ちながらも現代的なアプローチで仕上げられています。
コード例
<link href="https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Zen Kurenaido', serif;
}
</style>
Yuji Syuku
説明
書道のような力強いフォントです。
コード例
<link href="https://fonts.googleapis.com/css2?family=Yuji+Syuku&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Yuji Syuku', serif;
}
</style>
Amatic SC
説明
Amatic SC は、手書きのような外観を持つフォントであり、カジュアルで親しみやすい雰囲気が特徴です。
コード例
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Amatic SC', cursive;
}
</style>
UnifrakturMaguntia
説明
UnifrakturMaguntia は、フラクトゥール書体に基づいています。
中世ヨーロッパの書籍や文書を思わせるデザインです。
コード例
<link href="https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap" rel="stylesheet">
<style>
body {
font-family: 'UnifrakturMaguntia', cursive;
}
</style>
MonteCarlo
説明
エレガントな印象を持たせたいブランドやプロジェクトのロゴに使用されます。
特にファッション、インテリア、ライフスタイル関連のウェブサイトで使用されます。
コード例
<link href="https://fonts.googleapis.com/css2?family=MonteCarlo&display=swap" rel="stylesheet">
<style>
body {
font-family: 'MonteCarlo', cursive;
}
</style>
Uncial Antiqua
説明
アンシャル書体をベースにしたフォントです。
歴史的なテーマのイベントポスター、展示会の資料などで使用されます。
コード例
<link href="https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Uncial Antiqua', serif;
}
</style>
Nosifer
説明
ホラーやサスペンス、特殊なテーマのデザインに最適です。
滴やスプラッタの装飾が施されており、タイトルや見出しに使用することで、強い印象を与えます。
コード例
<link href="https://fonts.googleapis.com/css2?family=Nosifer&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nosifer', cursive;
}
</style>
似たフォント
Mystery Quest
説明
冒険やミステリー、ファンタジーの世界観を反映するようにデザインされています。
ステリーに関連するデザインなどで活用されます。
コード例
<link href="https://fonts.googleapis.com/css2?family=Mystery+Quest&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Mystery Quest', cursive;
}
</style>
Metal Mania
説明
メタル音楽のスタイルに合わせた装飾が施されており、力強く、エネルギッシュな印象を与えます。
コード例
<link href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Metal Mania', cursive;
}
</style>
Castoro Titling
説明
書籍や雑誌、ポスター、広告などのタイトルや見出しに最適です。
コード例
<link href="https://fonts.googleapis.com/css2?family=Castoro+Titling&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Castoro Titling', serif;
}
</style>
最後に
アルファベットのシンプルなフォントはすぐに見つかるので、あえて特徴的なものを集めてみました。
私自身のメモとしても使っていくつもりなので、随時追加されていくかもしれません。