有料フォントにも劣らない!高品質で使い勝手のよい英語のフリーフォント Top 10

個人でも商用でも無料で、ウェブでも紙でも、そしてWebフォントとしても利用できる、人気の高いオープンソースのフリーフォント Top 10を紹介します。

ウェイトが複数揃っているものばかりなので、使い勝手がよいと思います。

サイトのキャプチャ

Top 10 Open-Source Web Fonts

Typewolfは、ウェブデザインのためのタイポグラフィのアイデアをコレクションしているサイトです。

フォントは全てGoogle Fontsのオープンソースで、Webフォントとして利用するのも、コンピュータにインストールしてウェブデザインや紙のデザインに利用することもできます。
もちろん、個人でも商用でも無料で利用できます。詳しくはライセンスページをご覧ください。

フォントのダウンロードとWebフォントとしての利用方法は、一番下に説明を書いたので参考にしてください。

1位から順に紹介します。
また、各フォントを使ったウェブサイトのショーケースも参考に。

フォントのキャプチャ

Inconsolata
参考:InconsolataをWebフォントで使用している例

フォントのキャプチャ

Open Sans
参考:Open SansをWebフォントで使用している例

フォントのキャプチャ

Montserrat
参考:MontserratをWebフォントで使用している例

フォントのキャプチャ

Roboto
参考:RobotoをWebフォントで使用している例

フォントのキャプチャ

Source Sans Pro
参考:Source Sans ProをWebフォントで使用している例

フォントのキャプチャ

Lato
参考:LatoをWebフォントで使用している例

フォントのキャプチャ

Karla
参考:KarlaをWebフォントで使用している例

フォントのキャプチャ

Playfair Display
参考:Playfair DisplayをWebフォントで使用している例

フォントのキャプチャ

Merriweather
参考:MerriweatherをWebフォントで使用している例

フォントのキャプチャ

Alegreya
参考:AlegreyaをWebフォントで使用している例

Google FontsのダウンロードとWebフォントとしての利用方法

一番目の「Inconsolata」を例に、ダウンロードとWebフォントとしての利用方法を簡単に紹介します。

Google Fontsをダウンロードする方法

フォントのページにアクセスし、右上の「Open Inconsolata in Google Fonts」をクリックします。

サイトのキャプチャ

Inconsolata

右のダウンロードアイコンをクリックします。

サイトのキャプチャ

Open Inconsolata in Google Fonts

「.zip file」をクリックすると、フォントをダウンロードできます。

サイトのキャプチャ

Google FontsをWebフォントとして利用する方法

「Open Inconsolata in Google Fonts」ページ下の右「use」を選択します。

サイトのキャプチャ

Open Inconsolata in Google Fonts

コンテンツをスクロールすると、ページへの実装方法が掲載されています。

サイトのキャプチャ
<link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>

font-family: 'Inconsolata', sans-serif;

top of page

©2017 coliss