Webフォントとは、Webページで使用するために特別に設計されたフォントで、サーバーからデータを読み込む、もしくはダウンロードして利用することができます。
通常のWebページでは、ブラウザがローカルにインストールされたフォントを使用しますが、Webフォントを使用することで、訪問者が特定のフォントを持っていなくても、Webページ上で選択したフォントを使用することができます。
Webフォントは、スタイルやデザインにおいて重要な役割を果たし、Webサイトの視覚的な魅力を向上させることができます。また、Webフォントを使用することで、Webページの読み込み速度が遅くなるという問題もありません。
ただし、Webフォントを使用する場合は、適切なライセンスを持つフォントを選択し、著作権侵害にならないように注意する必要があります。
一般的なWebフォントの使い方
①Webフォントを選択する
Webフォントは、多くのフォント提供業者が提供しており、Google Fonts、Adobe Fontsなどが代表的です。これらのサービスからフォントを選択して、自分のWebサイトに埋め込むことができます。
②Webフォントをダウンロードする
Webフォントを使用するには、まずWebフォントをダウンロードする必要があります。Webフォントは通常、TrueTypeフォント（.ttf）やOpenTypeフォント（.otf）の形式で提供されます。
③CSSでWebフォントを指定する
Webフォントを使用するためには、CSSでフォントを指定する必要があります。
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
font-weight: 400;
font-style: normal;
}
body {
font-family: 'MyWebFont', sans-serif;
}上記のCSSでは、MyWebFontという名前のWebフォントを定義しています。font-familyプロパティでフォントを指定し、srcプロパティでWebフォントのファイルパスを指定します。
WebページにWebフォントを埋め込む
最後に、WebフォントをWebページに埋め込む必要があります。これは、HTMLファイルでCSSファイルを読み込むように指定することで行われます。
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<link rel="stylesheet" href="mystyles.css">
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>上記のHTMLでは、mystyles.cssというCSSファイルを読み込んでいます。このCSSファイルでWebフォントを定義することで、WebページでWebフォントを使用することができます。
CDNで使用する場合
Webフォントはダウンロードして使う以外にも、Webページ上でフォント提供元のサーバーからデータを取得する方法もあります。
下記はGoogle FontsをCDNで読み込む例です。
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>body {
font-family: 'Noto Sans JP', sans-serif;
}CDNの読み込み方法は使用するフォントによって異なる場合があるので、マニュアルをよく見て行うようにしましょう。
おすすめのWebフォントサービス
Google Fonts（https://fonts.google.com/）
Google Fontsとは、Googleが提供する無料のWebフォントサービスです。Webデザイナーや開発者がWebページやアプリケーションで利用することができる、オープンソースのフォントを提供しています。
Google Fontsには、世界中の多数の言語に対応した数千種類以上のフォントが用意されており、Webフォントの需要に応えるために定期的に新しいフォントが追加されています。また、Google Fontsのフォントは、サイトやアプリのパフォーマンスに影響を与えないように、最適化されたWebフォントのフォーマットを利用しています。
- 大量のフォントが無料で利用可能
- フォントのカスタマイズが容易
- 外部スクリプトの読み込みが必要
Adobe Fonts（https://fonts.adobe.com/）
Adobe Fontsとは、Adobeが提供するWebフォントサービスです。以前はTypekitという名称でしたが、現在の名称に変更されました。
Adobe Fontsには、高品質な商用利用可能なフォントが用意されており、世界中の言語に対応しています。また、多数のフォントがAdobeのCreative Cloudサブスクリプションに含まれているため、デザイン作業において非常に便利です。Webフォントの他にも、デスクトップ用フォントも提供されており、Adobe Creative Cloudライブラリと同期して、さまざまなデバイスで利用することができます。
Adobe Fontsは、クラウドベースのフォント管理システムであるため、Webフォントの利用においては外部スクリプトの読み込みが必要ですが、その分、多様なデバイスで利用可能であるという特徴があります。また、Adobe Fontsは、Webフォントのライセンス管理を容易にする機能を備えており、フォントの利用状況を監視したり、ライセンスの更新を行ったりすることができます。
- Adobeが提供する高品質のフォントが利用可能
- クラウドベースで管理され、多様なデバイスで利用可能
Font Squirrel（https://www.fontsquirrel.com/）
Font Squirrelは、Webフォントを提供する無料のWebサイトであり、商用利用可能なフォントも多数用意されています。Font Squirrelは、様々なスタイル、言語、特徴を持ったフォントを提供しており、多数の種類のフォントが揃っているため、Webデザインにおいて幅広い選択肢を提供することができます。
Font Squirrelは、商用利用可能なフォントを取り揃えていることが大きな特徴であり、オリジナルのWebフォントを作成することもできます。さらに、Webフォントの使用にあたりライセンスについて心配する必要がないよう、すべてのフォントが商用利用可能であり、完全に無料で利用できます。
また、Font Squirrelは、Webフォントのサブセット化という機能も提供しており、必要な文字のみを選択してWebフォントを作成することができます。この機能により、Webページのパフォーマンスを改善し、フォントの読み込み速度を高速化することができます。
- 商用利用可能なフォントが多数揃っている
- フォントの自動生成ツールが利用可能
- Webフォント以外にもデスクトップフォントがダウンロード可能
Webデザイナーを目指すあなたへ
Webデザイナーを目指すあなたにおすすめしたいのが「デジタルハリウッド STUDIO by LIG」。
初見でこのスクールの存在を聞いた時はビックリして腰が抜けそうになりました、、、笑
以下の記事では「デジタルハリウッド STUDIO by LIG」が何故おすすめできるのか、現役Webデザイナーである筆者の視点も交えつつ、熱く語っておりますので是非チェックしてみてくださいね！
実践的なWebデザインが学べる！ デジタルハリウッドSTUDIO by LIG
「デジタルハリウッド STUDIO by LIG」の詳細を見る
