Enable JavaScript in your browser. このウェブサイトはJavaScriptをオンにしてご覧下さい。

無料フォントのダウンロードサイトのまとめ|日本語・英語のフリーフォントの設定方法と使い方も解説

font

無数にあるフリーフォント提供サイトから、WEBサイト制作に役立つサイトのみをまとめました。フォントは、テキストとしての利用はもちろん、ロゴや見出しにも頻繁に活用するので、WEBサイト制作の必須ツールです。上手にフリーフォントを活用して、WEBサイトのクオリティを一段階アップさせましょう。

下記には、フリーフォント提供サイト一覧、それぞれのフォント提供サイトの特徴、フォントの設定方法と使い方を紹介しています。

フリーフォント提供サイト一覧

dafont.com

dafont.com

欧文フォントや、イラストフォントが、見きれないほど提供されています。

1001 Free Fonts

1001 Free Fonts

有名な欧文フォントダウンロードサイト。ページがとても見やすく、探しやすいです。

NAVER(日本語フリーフォントのまとめ)

NAVER(日本語フリーフォントのまとめ)

日本語フリーフォントを、NAVERにまとめてくれたありがたいページ。日本語フォント探しは、ここからだけでいいかも。

Google webfonts

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」の使い方を参考にしてください。

フリーフォントの総括

上記で紹介したサイトだけでも、たくさんのフリーフォントがあり、どれを使おうか迷ってしまうかと思います。初心者の方は、次の点に注意してフォントを使いましょう。

  1. 一つのWEBサイトで使用するフォントの数は1・2個に限定する
  2. 可読性の悪いフォントは使わない
  3. 絵文字・イラストフォントは使用しない

以上、無料で使えるフォントサイトの紹介から、使い方までをまとめてみました。たくさんあるフリーフォントの中から、お気に入りのフォントを見つけましょう。