昨年2022年の4月に入社して初めてのSOLUTION MAGAZINEデビュー記事になります！
今後ともよろしくお願いいたします！ Webサイト制作をする上で、フォント選びはサイトの雰囲気を左右する重要な要素です。
色々なフォントはありますが、近年では魅力的なサイト作りには特に『Webフォント』が欠かせない存在になっています。
そこで、今回は弊社でも幅広く活用しているWebフォントについてご紹介します！
・Webフォントとは？
・よく使うWebフォントサービス
・Webフォントにデメリットはある？
・まとめ
Webフォントとは？
まずはWebフォントについて軽く説明を…
Webサイトで表示できるフォントは大きく分けて２種類、
デバイスフォントとWebフォントがあります。
デバイスフォント（システムフォントとも呼ばれる）は使用デバイスのOSに標準搭載されているいわゆるデフォルトのフォントになります。
デバイスによって搭載されるフォントが異なる場合があるので、同じフォントを指定したとしてもデバイスごとに見え方が変わってしまう可能性があります。
一方、Webフォントはインターネット上、サーバー上で提供されるフォントデータを引き出してきて文字を表示するフォントです。
こちらの場合は同じフォントデータを読み込むため、どのデバイスからでもフォントの見え方が保たれることになります！
よく使うWebフォントサービス
私がよく使用しているWebフォントのサービスは主に以下の2つになります。
Google Fonts
完全無料・商用利用可で1500近いフォントを使用できます。
記事作成時点で日本語は約50書体ありました！（太さも含めるともっと多いです）
会員登録も不要なので、Webフォントを試すならここからがおすすめです！
Adobe Fonts
Adobeのアカウントがあれば（登録無料）1000以上のフォントを使用でき、
さらにAdobe製品の契約があればなんと20000以上のフォントが使用できます！商用もOK！
日本語フォントも400書体以上あり、種類に困ることはないでしょう。 Webサイト制作に限らず、イラレ等Adobe製品との相性も良く使いやすいです。
関連記事→ ふぉんとにすごいぞ！Adobe Fonts
Webフォントにデメリットはある？
残念ながら…
あります…
大いなる力には、大いなる責任が伴うものです。
Webフォントにもその例に漏れず、見過ごせないデメリットが存在します。
というのも、基本的に日本語のWebフォントは重たいんです。
欧文フォントを使うのであれば多少なり軽いかもしれませんが、
日本語フォントにはひらがなカタカナ漢字etc…が入っているので文字数が多くファイルも重くなってしまうわけです。
フォントの重さによって表示遅れが発生してしまうのはSEO(検索エンジン最適化)的にも良くありません。
Think with Googleには「1秒の遅延でコンバージョンが最大20%低下する」と書かれるほど、サイトの表示速度はなるべく早いことに越したことはありません！
応急措置として、ブラウザの機能でWebフォントを読み込むまでデバイスフォントを代替として表示する機能もありますが、切り替える際に表示がガタつくように見えてしまいます。
どうしても雰囲気を壊したく無い！という場合はロード画面を挟むと吉でしょう◎
一方で、フォントデータごと、使う文字を絞って軽くしちゃおう！というサブセット化という手法もあります。これによって高速化は実現できるのですが管理が…大変そう…
また、これはWebフォント自体のデメリットというより、使用する際の注意点なのですが…
Googleフォントをはじめとして、リモートでホストされるWebフォントはGDPR（EU一般データ保護規則）に違反するリスクがあります。
参考:
WebフォントはGDPRに抵触？WordPress.orgが書き換えを呼びかけ – TECH+
ドイツでGoogle FontsをWebサイトに使うと訴えられる？ – note
Googleフォントを使うと犯罪になる – Qiita
なんのこっちゃ。という感じですが！昨年の弊社エンジニア陣をざわつかせた一事件です。
詳しい内容は割愛しますが、要約すると、(Googleフォントであれば)GoogleがWebフォントを通じて閲覧者のIPアドレスを特定できちゃうからプライバシー的にだめ！といった雰囲気。
いやはやなんというか…インターネットのプロトコル自体を否定しているような…?
まだまだ国内向けサイトであれば大きな問題ではないかもしれませんが、Cookieの廃止など個人情報の扱いは世界中で非常に厳しくなっており、海外展開も視野に入れる場合は結構シビアな問題になりますね…
Webフォントをダウンロードして、自社で管理すればこの問題はクリアできそうです！
まとめ.
Webフォントは導入も簡単で利点も多い反面、デメリットや注意点もあることを少しでも知っていただけたら幸いです！
際限なくWebフォントを使ってしまうと結構悲惨なことになるので、目新しさは減ってしまいますがデバイスフォントも上手く使っていくことがSEO良いサイト作りに繋がりそうです…!
ブラウザのアップデート等でフォントの環境も日々変わっていくものなので、私も常に情報を追いかけていたいと思います！
最後に！
当社ではWeb制作をはじめ、様々なエキスパートが
お困りごとについての施策や改善案をご提案させていただきます。
デザインにこだわったサイトを作りたい！
古くなったサイトをリニューアルしたい！
SEO対策に困っている…
という方は、ぜひお気軽にご相談ください！
#ご相談はこちらから
GOOQ by Aicreate
https://gooq.jp/contact/
