Webフォントとは？Google Fontsの使い方も解説

こんにちは、１ヶ月間に同じ映画を7回観たさとうです。

今回はWebフォントについて詳しく知らなかったため、簡単にまとめてみました！

Webフォントとは？

簡単に言うと、サーバからフォントを呼び出して表示するシステムです。

Webフォントを利用すれば、閲覧者の端末環境にかかわらず、web作成者が指定したフォントを確実に表示できます。

フォントでデザインの雰囲気がガラッと変わってしまいますよね。

それを防ぐために、Webフォントを利用してデザインをしてはいかがでしょうか？

そこで、完全無料で商用利用可のGoogle Fontsをご紹介！

簡単な使い方をまとめました。

Google Fontsの使い方を解説

ここからは、Google Fontsの使い方を画像とあわせて解説していきます。

Googl Fontsへアクセス

フォントを選ぶ

HTMLにコードを貼る

CSSにもコードを貼る

これで追加完了です。

Font-familyメーカーで対応フォントを確認

Webフォントはどんな環境でも同じフォントが表示されて、安心ですが、日本語は、ひらがな・カタカナに加えて「漢字」まで読み込まないといけないので、重くなってしまいます。なので、速度を優先する場合、日本語は通常フォントを指定しましょう。

しかし、標準フォントは環境によっては表示されないフォントもあるみたいです。

Font-familyメーカー

Windows、Mac、iPhoneの標準フォントが一覧でまとめられています。各環境にどのフォントが対応しているのかを見ながらフォント選びができます。

しかも、CSSにそのまま貼れるソースまで作成してくれます。便利ですね！

SNSサイトやオンラインメディアで使われているフォント例も見れるので、参考にしてみてはいかかでしょうか？

まとめ

Webフォントを使用すれば、端末環境にかかわらず指定したフォントを表示させられます。しかし、Webフォントは重くなってしまうので、読み込み速度を優先するなら標準フォントの使用をおすすめします。標準フォントを使用する場合は、Font-familyで各端末の対応フォントを確認しながらフォントを選ぶとよいでしょう。また、Webフォントを使用する場合は、完全無料、商用利用可能なGoogle Fontsがおすすめです。ぜひ参考にしてください。

Tweet

この記事を書いた人

sato