サキ今回はWebフォントについて解説していきます。
基礎知識を身につけましょう！
Webフォントとは
Webフォントは、Webサイトやオンラインアプリケーションで使用されるフォントです。
本来、Webブラウザで表示されるフォントは、端末にインストールされているフォントを使用します。これをデバイスフォントと呼びます。
しかし、それぞれの端末でインストールされているフォントは違うため、指定したフォントがない場合は代替フォントが使用されます。
Webフォントはサーバーにアップロードされたフォントを読み込むことで表示することができるため、どの端末でも統一してフォントを表示することが出来ます。
Webフォントのメリット
Webフォントを使用するメリットは以下のようなものが挙げられます。
- 環境に依存しない
- ユーザビリティが高い
- レスポンシブ対応が容易
Webフォントの利点として、WindowsやMac、パソコンやスマートフォンなど環境に依存せずに同一のフォントを表示することが出来ます。
「サイトのイメージを壊したくない」「表示崩れが気になる」と言ったデザインの部分での役割と、画像化せずテキスト化することでSEOやユーザビリティ、アクセシビリティにも影響します。
また、テキストとすることで画像編集の手間が減り、レスポンシブ対応や更新性が容易になることも期待できます。
Webフォントのデメリット
Webフォントを使用するデメリットは以下のようなものが挙げられます。
- 表示速度への影響
- 日本語対応が少ない
- ライセンスの確認
Webフォントを使用するとフォントファイルを読み込む必要があるため、ページの読み込み時間が長くなる場合があります。特に日本語フォントやウエイトが多いなどとなるとファイルサイズが大きくなるため、注意が必要です。
日本語フォントは増えてきてはいるものの、デザイン作成時に自由に作成してしまうと再現出来ない状態が発生してしまうので気を付ける必要があります。
Webフォントはオンラインで使用できるGoogle Fontsなどのサービスだけでなく、自身で所持しているフォントをサーバーにアップロードしてWebフォント化することも出来ます。
ただし、著作権の問題などクリアしなくてはいけない壁があるため、注意が必要です。
特にフリーフォントの場合でも、「再配布」が許可されていない場合はWebフォントとして使用できません。
おすすめのWebフォントサービス
おすすめのWebフォントサービスをご紹介します。
有料・無料のものがありますので、それぞれ用途に合わせて使用してみてください。
Google Fonts
Googleが提供する無料のWebフォントサービスです。
オープンソースで豊富なフォントを提供しており、最も有名なWebフォントサービスと言えます。
タグを埋め込むだけで使用でき、商用・非商用問わず自由に使用・改変・再配布が可能です。
このサイトでもGoogle Fontsを使用しています。
Adobe Fonts
https://fonts.adobe.com/?locale=ja-JP
Adobeが提供するWebフォントサービスです。有料と無料があります。
どちらにせよアカウントを作成する必要があります。
注意点としてクライアントワークで使用する場合は、クライアント側でアカウント登録をしていただく必要があります。
また、アカウント依存になりますので、契約を解除するとフォントが表示できなくなります。
上記以外にもTypeSquareやFONTPLUSなど有名なサービスはありますので、興味があれば調べてみてください。
