PR

Webフォント

Webフォントとは、Webページで利用するフォントをサーバー側からダウンロードして使用する技術のことです。

Webページのデザインに特定のフォントを使用したい場合、Webフォントを利用することでデバイスにフォントがインストールされていなくてもそのフォントをダウンロードして適用することができます。多くの場合、Google FontsやAdobe Fontsのような外部のサービスプロバイダーから提供されておりWebページのデザインに利用されるフォントを自由に選ぶことができます。

従来のWebデザインではWebページで使用できるフォントには限りがありました。フォントはデバイスにインストールして使うのが普通だったからです。このため、当時はデバイスに組み込まれたフォントのみを使用するか、画像化して使うことでどうにかフォントのバリエーションを保っていました。

しかし、Webフォントの登場によりWebページで使用できるフォントに制限がなくなりWebページのデザインに多様なフォントを適用することができるようになりました。また、Webフォントのおかげでフォントを画像化する必要がなくなりました。当然画像で文字をマークアップするよりもテキストでマークアップした方が SEO に有利であり、検索エンジンにも適切な情報を提供できるようになりました。

Webフォントの利用方法は簡単で、外部のWebフォントプロバイダーから提供されるコードをWebページに埋め込むことで利用することができます。Webフォントは通常、TrueTypeフォーマットやOpenTypeフォーマットで提供されます。Webページを表示する際にサーバーからWebフォントファイルをダウンロードし、Webページに適用します。

ただし注意点が必要で、有料フォントをそのままWebサイトに使うのは基本的にNGです。著作権上の問題があるからです。外部のサービスプロバイダーはその辺りをクリアしてくれていて、かつかなり気軽に利用できるため意識から漏れがちですが、必ず購入したフォントの利用規約などを確認しましょう。詳しくは以下の記事をご覧ください。

関連サービス

Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
Artboard 1
メーカー、デザイナー、プロパティ、言語、分類などでフォントを検索。 Adobe Fonts のフォントライブラリで最新のフォントを探索。.
この記事を書いた人
小林 秀樹

Web制作フリーランス9年目|ディレクター・フロントエンドエンジニア
「世界一初心者に優しい」→セカヤサ。

コーポレートサイトやLP、メディア立ち上げまで幅広く対応。コーディングを軸に、UX設計・SEOライティング・サイト運用まで一貫対応。

法律系オウンドメディア立ち上げ支援では、特定のキーワードでのSEO1位を実現し問い合わせ獲得に貢献。また大手専門学校サイトの大規模リニューアル(100ページ超)でのディレクションと実装の両面の経験あり。

最近では、AIツールによる自社サービスUI制作や、ChatGPTを活用した記事執筆フローの構築など、AI時代に対応した制作手法の実践にも注力している。

zenn:
https://zenn.dev/hideki_climax

制作実績:
https://tan-band-c66.notion.site/37abe7077b184b338fd8f53f6873ca1d

小林 秀樹をフォローする
スポンサーリンク
シェアする
小林 秀樹をフォローする
タイトルとURLをコピーしました