Web制作独学者へWebフォント利用法を伝授

Web制作

みなさん、こんにちは!
フリーランスエンジニアのKATSUMIです。

WebサイトでWebフォントを利用すれば、ユーザーの閲覧環境に依存することなく指定したフォントを表示できる
ようになります。
また、画像化した文字とは違い文字を選択したり、コピーができるようになり、ユーザーの利便性が上がります。
今日は、そのWebフォントの利用法を説明します。

フォントのデータを提供しているWebサービスを使い、フォントをWebサイト上に表示させるシステムのことを「Webフォント」と言います。
Webページの中で表示するフォントデータを指定した場所からダウンロードしてきて、どんなデバイスの閲覧者でも同じように表示できるようにするためのものです。
以前はおしゃれなフォントを使用したい文字を画像として作成し、それをWebサイト上に表示させていました。
現在ではWebフォントを使うことでテキストを選択・コピー&ペーストできるだけでなく、素早くページを読み込ませることも期待できます。

無料で使えるフォント

■Google Fonts

Googleが提供しているWebフォントサービスが「Google Fonts」です。約1000種類あるすべてのフォントが無料で利用できます。日本語フォントもいくつか用意されています。
https://fonts.google.com/

■Adobe Fonts

AdobeもWebフォントサービスを提供しています。
すでにAdobe Creative Cloudの有料会員であれば15,000を超えるフォントを追加料金なしで利用できます。無料のAdobeアカウントでも約200種類のフォントを利用できます。
https://fonts.adobe.com/fonts?ref=tk.com

■その他

TypeSquare

多くの印刷物をはじめ、テレビのテロップなど多くのシーンで利用されているモリサワフォント。そのモリサワフォントに加えて様々なフォントメーカーの充実した書体ラインナップからフォントを選択できます。1つのフォントを月1万ページビュー(2022年8月1日から月1千ページビュー)まで無料。https://typesquare.com/

Typing Art

上品な印象の「はんなり明朝」や手書き風のかわいらしい「こども丸ゴシック」など https://typingart.net/

フォントダス

https://fontdasu.com/

MODI工場

http://modi.jpn.org/

日本語フォントを使う時の注意点

フォントを表示させるまでに若干時間がかかる

英語はアルファベット26文字で、文字のバリエーションや数字、記号も含めても100文字程度で表現できます。しかし日本語はひらがな、カタカナ、漢字・・・と、とても多くの文字が必要になります。そのため、フォントのデータも膨大です。ページの読み込みに時間がかかったり、フォントが表示されるまでにタイムラグが発生することもあります。

選べるフォントの種類が少ない

上記の理由もあり、欧文フォントに比べてWebフォントに対応している日本語フォントはまだ種類が少ないのが現状です。そのため好みのフォントが見つからないということもあるでしょう。ただ、どのWebフォントサービスも日本語フォントの開発を進めているため、時々、各WebフォントサービスのWebサイトでアップデート情報を確認すると良いでしょう。

Webページデザインでは、目を引くデザインが大切です。
デザインが良いと、ポートフォリオの出来も良くなりますし、仕事の依頼も増えます。

この情報が、Web制作初心者の転職採用やフリーランスエンジニアの仕事獲得のお役に立てますと幸いです。

下記を押していただけると励みになります!

にほんブログ村 ライフスタイルブログ フリーランス生活へ
                人気記事