有料フォントにも劣らない!高品質で使い勝手のよい英語のフリーフォント Top 10
Post on:2014年1月22日
個人でも商用でも無料で、ウェブでも紙でも、そしてWebフォントとしても利用できる、人気の高いオープンソースのフリーフォント Top 10を紹介します。
ウェイトが複数揃っているものばかりなので、使い勝手がよいと思います。
![サイトのキャプチャ](/wp-content/uploads-201401/2014012202.png)
Typewolfは、ウェブデザインのためのタイポグラフィのアイデアをコレクションしているサイトです。
フォントは全てGoogle Fontsのオープンソースで、Webフォントとして利用するのも、コンピュータにインストールしてウェブデザインや紙のデザインに利用することもできます。
もちろん、個人でも商用でも無料で利用できます。詳しくはライセンスページをご覧ください。
フォントのダウンロードとWebフォントとしての利用方法は、一番下に説明を書いたので参考にしてください。
1位から順に紹介します。
また、各フォントを使ったウェブサイトのショーケースも参考に。
![フォントのキャプチャ](/wp-content/uploads-201401/2014012203-01.png)
Inconsolata
参考:InconsolataをWebフォントで使用している例
![フォントのキャプチャ](/wp-content/uploads-201401/2014012203-02.png)
Open Sans
参考:Open SansをWebフォントで使用している例
![フォントのキャプチャ](/wp-content/uploads-201401/2014012203-03.png)
Montserrat
参考:MontserratをWebフォントで使用している例
![フォントのキャプチャ](/wp-content/uploads-201401/2014012203-04.png)
Roboto
参考:RobotoをWebフォントで使用している例
![フォントのキャプチャ](/wp-content/uploads-201401/2014012203-05.png)
Source Sans Pro
参考:Source Sans ProをWebフォントで使用している例
![フォントのキャプチャ](/wp-content/uploads-201401/2014012203-06.png)
![フォントのキャプチャ](/wp-content/uploads-201401/2014012203-07.png)
Karla
参考:KarlaをWebフォントで使用している例
![フォントのキャプチャ](/wp-content/uploads-201401/2014012203-08.png)
Playfair Display
参考:Playfair DisplayをWebフォントで使用している例
![フォントのキャプチャ](/wp-content/uploads-201401/2014012203-09.png)
Merriweather
参考:MerriweatherをWebフォントで使用している例
![フォントのキャプチャ](/wp-content/uploads-201401/2014012203-10.png)
Alegreya
参考:AlegreyaをWebフォントで使用している例
Google FontsのダウンロードとWebフォントとしての利用方法
一番目の「Inconsolata」を例に、ダウンロードとWebフォントとしての利用方法を簡単に紹介します。
Google Fontsをダウンロードする方法
フォントのページにアクセスし、右上の「Open Inconsolata in Google Fonts」をクリックします。
![サイトのキャプチャ](/wp-content/uploads-201401/2014012204-01.png)
右のダウンロードアイコンをクリックします。
![サイトのキャプチャ](/wp-content/uploads-201401/2014012204-02.png)
Open Inconsolata in Google Fonts
「.zip file」をクリックすると、フォントをダウンロードできます。
![サイトのキャプチャ](/wp-content/uploads-201401/2014012204-03.png)
Google FontsをWebフォントとして利用する方法
「Open Inconsolata in Google Fonts」ページ下の右「use」を選択します。
![サイトのキャプチャ](/wp-content/uploads-201401/2014012204-04.png)
Open Inconsolata in Google Fonts
コンテンツをスクロールすると、ページへの実装方法が掲載されています。
![サイトのキャプチャ](/wp-content/uploads-201401/2014012204-05.png)
<link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'> font-family: 'Inconsolata', sans-serif;
sponsors