かんたんで複雑な、ウェブサービスの作り方を紐解くブログ

ウェブフォントの必要性と使い方とは?

UX
2021/08/21

ウェブサービスのデザインを作成する上で重要となるのがフォントです。優れたデザイナーであれば、デザインに最もマッチするフォントでウェブサービスを提供したいと考えます。 現在では「ウェブフォント」の登場により、ウェブサービス上でもデザインに合わせて、さまざまなフォントの利用が可能となっています。 今回はそんなウェブ上でのフォントの利用方法を調べてみましょう。 ※本記事では、以下ブログを参考にさせて頂いております。 https://www.pagecloud.com/blog/how-to-add-custom-fonts-to-any-website https://www.inboxarmy.com/blog/fonts-in-email-marketing/

ウェブフォントとウェブセーフフォントの違い

ウェブフォントの前に、まずはウェブフォントとウェブセーフフォントの違いから考えてみましょう。 通常ウェブサービスに利用されるフォントはCSSの中の「font-family」で指定します。そして、ウェブフォントが登場する以前は、この「font-family」の中に「ウェブセーフフォント」のみが利用されていました。 「ウェブセーフフォント」とはWindows、MacなどのOSに予めインストールされているフォントのことで、これらフォントを「font-family」に指定することで、Windows / Mac などのOSが違えば異なるデザインとはなるものの、同じOSであれば指定したフォントでウェブサービスを表示することができます。 ただ、このウェブセーフフォントのみの場合、デザインに合わせてOSには存在しない特殊なフォントを利用したい場合、文字を画像にして表示するしかありませんでした。ただ、画像化してしまうと、レスポンシブ時に拡大すると文字が荒くなってしまったり、またSEOの観点からデメリットが大きくなります。 そこで必要になるのが「ウェブフォント」です。ウェブフォントは、サーバー側に対象となるフォントをアップロードしておく、またはAPIなどを利用する方法により、従来のウェブセーフフォント以外のフォントを、インターネット上で利用できるようにする技術です。

ウェブフォントの取得方法

「ウェブフォント」の概要がわかった上で、次にウェブフォントの取得方法をまとめていきます。 ウェブフォントの取得方法としては以下があります。 【1】ウェブフォントを提供するサービスから取得する 「Google Fonts」「Adobe fonts」などが多数のウェブフォントを提供しています。「Google Fonts」では無料にて1,000以上のフォントが提供されており、またAPIを利用することで簡単にウェブサービスにGoogle Fontsを利用できます。 また「Adobe fonts」に関しても、クリエイティブクラウドのサービス利用者であればデスクトップ用・ウェブフォント用の両方にて14,000以上のフォントから選んでウェブフォントを取得することができます。 【2】通常フォントをウェブフォントに変換して利用する 「Font Squirrel」サービスを利用すれば、自身が持っている「.ttf」形式などのフォントファイルを、ウェブフォントに変換してウェブサービス上で利用することができます。もちろんこのサービスを利用する際には、対象となるフォントファイルが、ライセンス上でウェブフォントとしての利用が問題ないことを確認することが前提となります。 https://www.fontsquirrel.com/tools/webfont-generator

ウェブフォントの実装方法

ウェブフォントの利用サービスがわかった上で、最後にウェブフォントの実装方法について考えてみます。 以下が大枠の流れです。 ※ ウェブフォントの利用方法は、例えば「Google Fonts」などAPI利用の場合は異なるため、都度エンジニアに確認をしつつ実装を行う必要があります。 【1】「.ttf」「.otf」形式のフォントファイルをダウンロード 【2】「Font Squirrel」を利用し、フォントファイルをウェブフォントとして利用可能な形に変換 【3】変換したフォントファイルと、関連するCSSファイルを対象サーバーにアップロード 【4】CSS内部の「@font-face 」にて、アップロードしたウェブフォントを指定する記述を追加 【5】CSS内部の「font-family」にて対象のウェブフォントを定義 このように、CSS等を書けるエンジニアの協力があれば、簡単にウェブフォントを実装することができます。

最後に感想として

以上が、ウェブフォントの利用方法です。 従来のウェブセーフフォントもユーザーにとっては慣れていて読みやすいものではありますが、よりデザイン性を重視したい場合には、ウェブフォントを利用することで、美しいデザインのウェブサービスをユーザーに提供できることになります。 読んでくださった方、ありがとうございます。