無料フォントのダウンロードサイトのまとめ｜日本語・英語のフリーフォントの設定方法と使い方も解説
無数にあるフリーフォント提供サイトから、WEBサイト制作に役立つサイトのみをまとめました。フォントは、テキストとしての利用はもちろん、ロゴや見出しにも頻繁に活用するので、WEBサイト制作の必須ツールです。上手にフリーフォントを活用して、WEBサイトのクオリティを一段階アップさせましょう。
下記には、フリーフォント提供サイト一覧、それぞれのフォント提供サイトの特徴、フォントの設定方法と使い方を紹介しています。
フリーフォント提供サイト一覧
dafont.com
欧文フォントや、イラストフォントが、見きれないほど提供されています。
1001 Free Fonts
有名な欧文フォントダウンロードサイト。ページがとても見やすく、探しやすいです。
NAVER（日本語フリーフォントのまとめ）
日本語フリーフォントを、NAVERにまとめてくれたありがたいページ。日本語フォント探しは、ここからだけでいいかも。
Google webfonts
Googleの欧文フリーフォント提供サイト。WEBサイトの、タイトルや見出しなどの部分的な利用に役立ちます。
Google webfontsは、WEBサイト用のフォントです。PCへフォントをインストールするタイプとは異なります。詳しい設定方法は下記サイトを参照ください。
Google webfontsの使い方が分かるサイト
フォントのダウンロードから設定方法と使い方まで
「1001 Free Fonts」のサイトを例に、フォントのダウンロードから、パソコンへの設定と使い方を説明していきます。
フォントの設定
「1001 Free Fonts」のサイトにアクセスし、使いたいフォントを探します。利用したいフォントが見つかったら、フォントの右に表示されている「ダウンロード」ボタンをクリックします。※ご使用になっているOSの「ダウンロード」ボタンを選択してください。
選択した「BeatMyGuest」フォントがダウンロードできました。ダウンロードしたフォルダをダブルクリックして展開します。※展開できない場合は、+Lhacaなどの解凍ソフトを使ってください。
フォルダを展開すると、beatmyguestという「フォントファイル」があります。この「フォントファイル」をパソコンへインストールします。まずは「フォントファイル」をデスクトップにドラッグ＆ドロップします。
デスクトップに「フォントファイル」を移動したら、次に、お使いのパソコンの「スタート」を開き、その中から「コントロールパネル」を開いてください。
「コントロールパネル」のページ上で、①クラシック表示を選択（クリック）して、②フォントフォルダをダブルクリックして開きます。
「フォントフォルダ」に追加したい「beatmyguestファイル」をデスクトップからドラッグ＆ドロップします。
「BeatMyGuest」フォントが、「フォントフォルダ」の一覧に反映されました。これで、お使いのパソコンに、「BeatMyGuest」フォントがインストールされましたので、フォントの設定は完了です。
フォントの使い方
お使いのグラフィックソフト（ペイントソフト）を起動して、①フォント一覧に、インストールした「BeatMyGuest」フォントがあることを確認してください。あとは、いつも通り②テキストにフォントを反映させるだけです。
CSSで、HTMLにフォントを適用させる際は、Google webfontsで紹介した1分で誰でも導入できる｢Google Web Fonts｣の使い方を参考にしてください。
フリーフォントの総括
上記で紹介したサイトだけでも、たくさんのフリーフォントがあり、どれを使おうか迷ってしまうかと思います。初心者の方は、次の点に注意してフォントを使いましょう。
- 一つのWEBサイトで使用するフォントの数は1・2個に限定する
- 可読性の悪いフォントは使わない
- 絵文字・イラストフォントは使用しない
以上、無料で使えるフォントサイトの紹介から、使い方までをまとめてみました。たくさんあるフリーフォントの中から、お気に入りのフォントを見つけましょう。
