【CSS3 / Webフォント】コピペで使える見出し用Google Fontsまとめ

かっこいいデザインのサイトを作るときに、レイアウトや配色と同じくらい大事な「フォント」。Webフォントが普及していて、最近はもっぱらGoogle Fontsに依存しているのですが、その中で、僕が独断と偏見で「見出しに使える！」と感じたフォントをまとめました。

見出しに使える Google Fonts 一覧

Candal

<link href='https://fonts.googleapis.com/css?family=Candal' rel='stylesheet' type='text/css'>
<style>
   .googlefont{font-family: 'Candal', sans-serif;}
</style>

Caveat Brush

<link href='https://fonts.googleapis.com/css?family=Caveat+Brush' rel='stylesheet' type='text/css'>
<style>
   .googlefont{font-family: 'Caveat Brush', cursive;}
</style>

Caveat

<link href='https://fonts.googleapis.com/css?family=Caveat' rel='stylesheet' type='text/css'>
<style>
   .googlefont{font-family: 'Caveat', cursive;}
</style>

Dhurjati

<link href='https://fonts.googleapis.com/css?family=Dhurjati' rel='stylesheet' type='text/css'>
<style>
   .googlefont{font-family: 'Dhurjati', sans-serif;}
</style>

Black Ops One

<link href='https://fonts.googleapis.com/css?family=Black+Ops+One' rel='stylesheet' type='text/css'>
<style>
   .googlefont{font-family: 'Black Ops One', cursive;}
</style>

Macondo Swash Caps

<link href='https://fonts.googleapis.com/css?family=Macondo+Swash+Caps' rel='stylesheet' type='text/css'>
<style>
   .googlefont{font-family: 'Macondo Swash Caps', cursive;}
</style>

Ruthie

<link href='https://fonts.googleapis.com/css?family=Ruthie' rel='stylesheet' type='text/css'>
<style>
   .googlefont{font-family: 'Ruthie', cursive;}
</style>

Khand

<link href='https://fonts.googleapis.com/css?family=Khand' rel='stylesheet' type='text/css'>
<style>
   .googlefont{font-family: 'Khand', sans-serif;}
</style>

Uncial Antiqua

<link href='https://fonts.googleapis.com/css?family=Uncial+Antiqua' rel='stylesheet' type='text/css'>
<style>
   .googlefont{font-family: 'Uncial Antiqua', cursive;}
</style>

Vampiro One

<link href='https://fonts.googleapis.com/css?family=Vampiro+One' rel='stylesheet' type='text/css'>
<style>
   .googlefont{font-family: 'Vampiro One', cursive;}
</style>

Megrim

<link href='https://fonts.googleapis.com/css?family=Megrim' rel='stylesheet' type='text/css'>
<style>
   .googlefont{font-family: 'Megrim', cursive;}
</style>

Faster One

<link href='https://fonts.googleapis.com/css?family=Faster+One' rel='stylesheet' type='text/css'>
<style>
   .googlefont{font-family: 'Faster One', cursive;}
</style>

Ribeye Marrow

<link href='https://fonts.googleapis.com/css?family=Ribeye+Marrow' rel='stylesheet' type='text/css'>
<style>
   .googlefont{font-family: 'Ribeye Marrow', cursive;}
</style>

Fascinate Inline

<link href='https://fonts.googleapis.com/css?family=Fascinate+Inline' rel='stylesheet' type='text/css'>
<style>
   .googlefont{font-family: 'Fascinate Inline', cursive;}
</style>

Creepster

<link href='https://fonts.googleapis.com/css?family=Creepster' rel='stylesheet' type='text/css'>
<style>
   .googlefont{font-family: 'Creepster', cursive;}
</style>

Dr Sugiyama

<link href='https://fonts.googleapis.com/css?family=Dr+Sugiyama' rel='stylesheet' type='text/css'>
<style>
   .googlefont{font-family: 'Dr Sugiyama', cursive;}
</style>

まとめ

個人使用のためにまとめました。本当、google fontsには色んなフォントがあって、見ているだけで時間が過ぎてしまいます。これが無料で提供なんて素晴らしいですね。