WEBフォントの使い方まとめ【無料で使えます】

Webページ作成
2020.01.29
スポンサーリンク

こんにちは朱夏です。

今回はWEBフォントについて書きたいと思います。
webサイトを作成していると、こんなことを考える事があります。

 

朱夏
朱夏

HTMLで使える日本語のフォントは種類が少ないなぁ。
WEBフォントっていうのがあるけど、どうやって使うんだろう？
お金がかかるのかな？

 

 

今回の記事は、こういった疑問を解消するために書きました。
WEBフォントがどういったものなのか、使い方から、WEBフォントサイトの紹介をまとめています。

[もくじ]
1.WEBフォントとは
2.WEBフォントの使い方
3.おすすめのWEBフォントサイト
4.あとがき

 

1.WEBフォントとは

WEBフォントとは、WEB上で提供されているフォントの事です。
自分のWEBサイトを表示する時に、WEBフォントを提供しているサイトからフォントデータを受け取り、画面に表示してくれます。
これにより、自身のサイトデータにフォントデータを格納する必要もありません。
更に、機種に依存することなく、どのブラウザでも同じフォントで表示させることが可能です。
メリットをまとめるとこんな感じです。

  • フォントデータのDL不要
  • 機種、ブラウザに依存せず同じフォント表示ができる
  • 種類が豊富

WEBフォントを使用する際のデメリットはこちらです。

  • WEBフォントの読み込みは一番最後
  • 読み込み完了までテキストが表示されない

画像などの大きなデータが多いサイトだと、表示に若干時間がかかるかもしれません。
これはWEBフォントのせいというより、サイト全体が重いせいなのでWEBフォントを使わない理由にはならないかと思います。

 

2.WEBフォントの使い方

WEBフォントの使い方は次の3ステップで完了します。

  1. 使いたいフォントを探す
  2. 提供されているコードをコピー
  3. コピーしたコードを自分のページに張り付け

これでWEBフォントを使えるようになります。
細かい部分は提供しているサイトによって違っていますが、基本的にやることは同じです。

おすすめのWEBフォントサイト

おすすめのWEBフォントサイト3つほどを紹介します。
今回紹介するサイトは扱っているフォントが豊富なので、自分が使いたいフォントが見つかるのではないでしょうか。
これ以外にもフリーのWEBフォントを提供しているサイトはいくつかあるので、気に入ったものが見つからなければググってみてください。

Google Fonts + 日本語
完全無料で使えるWEBフォントサイトです。
種類も豊富なので、とりあえずここから探してみるのが良いかと思います。

Google Fonts
 
Google Fonts + 日本語 • Google Fonts + Japanese
https://googlefonts.github.io/japanese/
As Google makes progress on supporting Japanese web typography, we invite designers and developers to experiment with these Japanese web fonts now available from Google Fonts.

FONT+
こちらは6ヶ月のトライアル期間は無料で使えます。
試してみて継続したければ月額のプランを契約しましょう。

fontplus.jp
 
Webフォント・サービス FONTPLUS ｜ ためし書き
https://fontplus.jp
「Webフォント・サービス FONTPLUS ためし書き」は、FONTPLUSが提供する豊富なWebフォントを「選んで」「変えて」「共有して」と、無料であれこれ試せるサービスです。

TypeSquare
こちらはサイトのPVが1万までは無料で使用できます。
1万PV以上になると、フォントが無効化される様です。

typesquare.com
 
Webフォント TypeSquare [タイプスクウェア]
https://typesquare.com

 

4.あとがき

今回は、まだWEBプログラミングを始めたばかりの人向けに記事を書いてみました。
WEBフォントをつかって、表現の幅を増やしていきましょう。

今回はここまでです。
次回もよろしくお願いします。

 

スポンサーリンク
タイトルとURLをコピーしました