有料フォントにも劣らない!高品質で使い勝手のよい英語のフリーフォント Top 10
Post on:2014年1月22日
個人でも商用でも無料で、ウェブでも紙でも、そしてWebフォントとしても利用できる、人気の高いオープンソースのフリーフォント Top 10を紹介します。
ウェイトが複数揃っているものばかりなので、使い勝手がよいと思います。
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フォントで使用している例
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」をクリックします。
右のダウンロードアイコンをクリックします。
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;
sponsors