CSSで指定するだけのウェブフォントを使用したサイトが多くなってきました。最近ではGoogle Fontsがリニューアルされ、ウェブフォントの見比べやサイズやスタイルの選択などがより容易になりましたが、それでも多くのウェブフォントからイメージどおりのフォントを探すのは依然として大変な作業です。
そこで当編集部では今回「見出しに最適」なフォントをテーマに20点ピックアップしました。
各フォントごとにコードを書いてありますが、記事末尾にはこれらをキュレーションしたGoogle Fontsのページもリンクしておきますので、是非ご利用下さい。
見出しに最適なウェブフォント
Alegreya Sans SC
Information is not knowledge.
|
1 |
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:300 rel="stylesheet"> |
|
1 |
font-family: 'Alegreya Sans SC', sans-serif; |
Amatic SC
Information is not knowledge.
|
1 |
<link href="https://fonts.googleapis.com/css?family=Amatic+SC:700 rel="stylesheet"> |
|
1 |
font-family: 'Amatic SC', cursive; |
Anton
Information is not knowledge.
|
1 |
<link href="https://fonts.googleapis.com/css?family=Anton rel="stylesheet"> |
|
1 |
font-family: 'Anton', sans-serif; |
Bangers
Information is not knowledge.
|
1 |
<link href="https://fonts.googleapis.com/css?family=Bangers rel="stylesheet"> |
|
1 |
font-family: 'Bangers', cursive; |
Caveat
Information is not knowledge.
|
1 |
<link href="https://fonts.googleapis.com/css?family=Caveat rel="stylesheet"> |
|
1 |
font-family: 'Caveat', cursive; |
Cherry Swash
Information is not knowledge.
|
1 |
<link href="https://fonts.googleapis.com/css?family=Cherry+Swash:700 rel="stylesheet"> |
|
1 |
font-family: 'Cherry Swash', cursive; |
Corben
Information is not knowledge.
|
1 |
<link href="https://fonts.googleapis.com/css?family=Corben:700 rel="stylesheet"> |
|
1 |
font-family: 'Corben', cursive; |
Creepster
Information is not knowledge.
|
1 |
<link href="https://fonts.googleapis.com/css?family=Creepster rel="stylesheet"> |
|
1 |
font-family: 'Creepster', cursive; |
Economica
Information is not knowledge.
|
1 |
<link href="https://fonts.googleapis.com/css?family=Economica:700 rel="stylesheet"> |
|
1 |
font-family: 'Economica', sans-serif; |
Homemade Apple
Information is not knowledge.
|
1 |
<link href="https://fonts.googleapis.com/css?family=Homemade+Apple rel="stylesheet"> |
|
1 |
font-family: 'Homemade Apple', cursive; |
IM Fell DW Pica SC
Information is not knowledge.
|
1 |
<link href="https://fonts.googleapis.com/css?family=IM+Fell+DW+Pica+SC rel="stylesheet"> |
|
1 |
font-family: 'IM Fell DW Pica SC', serif; |
Kaushan Script
Information is not knowledge.
|
1 |
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script rel="stylesheet"> |
|
1 |
font-family: 'Kaushan Script', cursive; |
Londrina Shadow
Information is not knowledge.
|
1 |
<link href="https://fonts.googleapis.com/css?family=Londrina+Shadow rel="stylesheet"> |
|
1 |
font-family: 'Londrina Shadow', cursive; |
Montserrat Subrayada
Information is not knowledge.
|
1 |
<link href="https://fonts.googleapis.com/css?family=Montserrat+Subrayada rel="stylesheet"> |
|
1 |
font-family: 'Montserrat Subrayada', sans-serif; |
Oswald
Information is not knowledge.
|
1 |
<link href="https://fonts.googleapis.com/css?family=Oswald:700 rel="stylesheet"> |
|
1 |
font-family: 'Oswald', sans-serif; |
Permanent Marker
Information is not knowledge.
|
1 |
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker rel="stylesheet"> |
|
1 |
font-family: 'Permanent Marker', cursive; |
Quicksand
Information is not knowledge.
|
1 |
<link href="https://fonts.googleapis.com/css?family=Quicksand rel="stylesheet"> |
|
1 |
font-family: 'Quicksand', sans-serif; |
Roboto Condensed
Information is not knowledge.
|
1 |
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:700 rel="stylesheet"> |
|
1 |
font-family: 'Roboto Condensed', sans-serif; |
Teko
Information is not knowledge.
|
1 |
<link href="https://fonts.googleapis.com/css?family=Teko rel="stylesheet"> |
|
1 |
font-family: 'Teko', sans-serif; |
Vollkorn
Information is not knowledge.
|
1 |
<link href="https://fonts.googleapis.com/css?family=Vollkorn rel="stylesheet"> |
|
1 |
font-family: 'Vollkorn', serif; |
Google Fontsページ
20フォントをセレクションしたGoogle Fontsページはこちら
