この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「IT用語」に対する知識は欠かせません。
あまり馴染みがない各分野のIT用語を、なるべく専門用語を使わずに解説していきます。
この記事の対象読者
Web制作を始めたばかりの人。
自社のWebマーケティングを任された人。
専門用語についていろいろ知りたい人。
Webマーケティングを行なっているが、言葉の定義を再確認したい人。
など、Webに限らずDXに携わるすべての方に。
Webフォントとは
Webフォントは、Webページにテキストを表示するために使用されるフォントのことです。
Webフォントは、Webブラウザ上で直接使用することができるため、インストールする必要がありません。これに対して、コンピュータにインストールされているフォントは、Webブラウザ上では使用できません。
WEBフォントの使い方
Webフォントを使用するには、以下の手順を踏む必要があります。
1. Webフォントを取得する：
Webフォントは、Google FontsやAdobe TypekitなどのWebフォントリソースから取得することができます。
2. WebフォントをWebサイトに追加する：
Webフォントを取得したら、HTMLやCSSにWebフォントを追加する必要があります。
3. Webフォントを使用する：
Webフォントを追加したら、HTMLやCSSでそれを使用することができます。例えば、CSSのfont-familyプロパティを使用して、Webフォントを指定することができます。
例:
<link href=”https://fonts.googleapis.com/css2?family=Open+Sans&display=swap” rel=”stylesheet”>
p {
font-family: ‘Open Sans’, sans-serif;
}
上記の方法でWebフォントを使用することができます。
Webフォントを使うメリット
Webフォントを使用することには様々なメリットがあります。
グローバルアクセス性
Webフォントは、インストールする必要がないため、Webページを閲覧するすべてのユーザーに対して同じフォントを使用することができます。
デザインの多様性
Webフォントリソースから様々なフォントを選択することができるため、デザインの多様性を高めることができます。
パフォーマンス
Webフォントは、Webブラウザ上で直接使用するため、パフォーマンスに影響を与えることがありません。
SEOに有効
Webフォントを使用することで、縦書きやカタカナなどの特殊な文字を正確に表示することができるため、SEOに有効です。
WEBフォントを使う際の注意点
Webフォントを使用する際には、いくつかの注意点があります。
フォントの読み込み時間
Webフォントは、Webページを読み込むために別途読み込む必要があります。これにより、ページの読み込み時間が増加する可能性があります。これを避けるために、フォントの読み込みを最小限に抑える手法があります。
フォントのライセンス
Webフォントは、一部のフォントは商用利用に対して有料であり、個人的な使用に対しても有料である可能性があります。
ブラウザの互換性
Webフォントは、ブラウザによってサポートされていない場合があります。使用するフォントがサポートされているブラウザで正しく表示されることを確認する必要があります。
正しく使わないとSEOに悪影響がでる可能性がある
Webフォントを使用することで、検索エンジンが文字を正確に認識できない可能性があります。SEOに影響を与えないように、適切なタグやスタイルを使用し、文字を正確に認識させるようにする必要があります。
フォントのクオリティー
Webフォントは、品質が低いものもあり、使用するフォントを選ぶ際には注意する必要があります。
Web上でよく使われるWEBフォントの例
以下は、有名なWebフォントの一部例です。
- Open Sans: Googleによって開発された、等幅でありながらも人間的な感覚を持っているフォント。
- Montserrat: Julieta Ulanovskyによってデザインされた、美しくクリーンなフォント。
- Roboto: Christian Robertsonによってデザインされた、モダンな感覚を持ったフォント。
- Lato: Łukasz Dziedzicによってデザインされた、清潔で読みやすいフォント。
- Raleway : Matt McInerneyによってデザインされた、スリムでスタイリッシュなフォント。
- Oswald: Vernon Adamsによってデザインされた、シンプルでモダンなフォント。
これらのフォントは、Webフォントリソースからダウンロードし、Webサイトに追加することで使用することができます。
まとめ
Webフォントは、HTMLやCSSによって指定され、Webブラウザがそれらを読み込み、表示します。Webフォントを使用することには、グローバルアクセス性やデザインの多様性などのメリットがあります。一方で、フォントの読み込み時間やフォントのライセンスに注意する必要があります。また、ブラウザの互換性やSEOに影響を与えないようにすることも重要です。
