タイトルや見出しで使いたいオシャレなWebフォント20選

UX MILK編集部

モノづくりのヒントになるような記事をお届けします。

eyecatch_webfonts

CSSで指定するだけのウェブフォントを使用したサイトが多くなってきました。最近ではGoogle Fontsがリニューアルされ、ウェブフォントの見比べやサイズやスタイルの選択などがより容易になりましたが、それでも多くのウェブフォントからイメージどおりのフォントを探すのは依然として大変な作業です。

そこで当編集部では今回「見出しに最適」なフォントをテーマに20点ピックアップしました。

各フォントごとにコードを書いてありますが、記事末尾にはこれらをキュレーションしたGoogle Fontsのページもリンクしておきますので、是非ご利用下さい。

見出しに最適なウェブフォント

Alegreya Sans SC

Information is not knowledge.
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:300 rel="stylesheet">
font-family: 'Alegreya Sans SC', sans-serif;

Amatic SC

Information is not knowledge.
<link href="https://fonts.googleapis.com/css?family=Amatic+SC:700 rel="stylesheet">
font-family: 'Amatic SC', cursive;

Anton

Information is not knowledge.
<link href="https://fonts.googleapis.com/css?family=Anton rel="stylesheet">
font-family: 'Anton', sans-serif;

Bangers

Information is not knowledge.
<link href="https://fonts.googleapis.com/css?family=Bangers rel="stylesheet">
font-family: 'Bangers', cursive;

Caveat

Information is not knowledge.
<link href="https://fonts.googleapis.com/css?family=Caveat rel="stylesheet">
font-family: 'Caveat', cursive;

Cherry Swash

Information is not knowledge.
<link href="https://fonts.googleapis.com/css?family=Cherry+Swash:700 rel="stylesheet">
font-family: 'Cherry Swash', cursive;

Corben

Information is not knowledge.
<link href="https://fonts.googleapis.com/css?family=Corben:700 rel="stylesheet">
font-family: 'Corben', cursive;

Creepster

Information is not knowledge.
<link href="https://fonts.googleapis.com/css?family=Creepster rel="stylesheet">
font-family: 'Creepster', cursive;

Economica

Information is not knowledge.
<link href="https://fonts.googleapis.com/css?family=Economica:700 rel="stylesheet">
font-family: 'Economica', sans-serif;

Homemade Apple

Information is not knowledge.
<link href="https://fonts.googleapis.com/css?family=Homemade+Apple rel="stylesheet">
font-family: 'Homemade Apple', cursive;

IM Fell DW Pica SC

Information is not knowledge.
<link href="https://fonts.googleapis.com/css?family=IM+Fell+DW+Pica+SC rel="stylesheet">
font-family: 'IM Fell DW Pica SC', serif;

Kaushan Script

Information is not knowledge.
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script rel="stylesheet">
font-family: 'Kaushan Script', cursive;

Londrina Shadow

Information is not knowledge.
<link href="https://fonts.googleapis.com/css?family=Londrina+Shadow rel="stylesheet">
font-family: 'Londrina Shadow', cursive;

Montserrat Subrayada

Information is not knowledge.
<link href="https://fonts.googleapis.com/css?family=Montserrat+Subrayada rel="stylesheet">
font-family: 'Montserrat Subrayada', sans-serif;

Oswald

Information is not knowledge.
<link href="https://fonts.googleapis.com/css?family=Oswald:700 rel="stylesheet">
font-family: 'Oswald', sans-serif;

Permanent Marker

Information is not knowledge.
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker rel="stylesheet">
font-family: 'Permanent Marker', cursive;

Quicksand

Information is not knowledge.
<link href="https://fonts.googleapis.com/css?family=Quicksand rel="stylesheet">
font-family: 'Quicksand', sans-serif;

Roboto Condensed

Information is not knowledge.
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:700 rel="stylesheet">
font-family: 'Roboto Condensed', sans-serif;

Teko

Information is not knowledge.
<link href="https://fonts.googleapis.com/css?family=Teko rel="stylesheet">
font-family: 'Teko', sans-serif;

Vollkorn

Information is not knowledge.
<link href="https://fonts.googleapis.com/css?family=Vollkorn rel="stylesheet">
font-family: 'Vollkorn', serif;

Google Fontsページ

20フォントをセレクションしたGoogle Fontsページはこちら


イベント

2017/12/05(火)
Design Thinking Square