こんにちは、小島です！
最近は日常に関する投稿が多かったのでwebサイト制作・更新の業務に関する記事を書いていきたいと思います。
今回はWeb制作に欠かせない「webフォント」についてです。
最後の方で私が制作現場で出会った見やすいフォントについてもまとめているのでぜひ見てみてください！

Webフォントは、ウェブサイト上でフォントを指定するための技術で、従来の「デバイスにインストールされたフォント」を利用する方法に代わるものとして登場しました。
簡単にいうと今まではそれぞれのパソコン（WindowsやMacなど）の中に入っているフォントに勝手に変換されて表示されていたのが制作者の意図したフォントで表示できるようになったということです。
この技術により、デバイスや環境に依存しないフォント表示が可能になり、ウェブデザインの幅が大きく広がりました。調べてみるとwebフォントが誕生したのは1990年代後半なのだそうです。今では当たり前に使われている技術ですが自分が生まれる少し前に誕生した技術なのだと思うとちょっと不思議な気持ちです。

Webフォントの仕組み

Webフォントは、サーバー上に配置されたフォントファイルをウェブページと一緒に配信する仕組みです。ブラウザはこのフォントファイルをダウンロードし、指定されたテキストに適用します。これにより、ユーザーの環境にフォントがインストールされていなくても、ウェブサイト制作者が意図したフォントでコンテンツを表示できます。Webフォントは主に以下のフォーマットで提供されています。

• WOFF（Web Open Font Format）
  Web向けに最適化されたフォーマットで、ほとんどのブラウザでサポートされています。
• WOFF2
  WOFFの改良版で、より軽量化されています。最新のブラウザで対応しています。
• TTF（TrueType Fonts）/OTF（OpenType Fonts）
  元々デスクトップ用に設計されたフォーマットですが、一部のブラウザでも使用可能です。
• EOT（Embedded OpenType）
  主に古いInternet Explorerで使用されます。

Webフォントを使うメリット

1. デザインの一貫性

Webフォントを利用することで、どのデバイスでも統一されたフォントデザインを提供できます。それぞれのサイトのイメージによってフォントを変えることでサイトの印象もガラリと変わります。

2. 多様な表現が可能

従来の「Webセーフフォント」（例: Arial, Times New Roman）に比べ、Webフォントを利用することで、ユニークで魅力的なフォントを使用できます。これにより、視覚的なインパクトを与えるウェブサイトになります。バナーやメインビジュアルには特徴的なフォントが使われていることが多いですよね。

3. 多言語対応

Google FontsやAdobe Fontsでは、多言語対応フォントが豊富に提供されています。これにより、世界中のユーザーに向けて適切なフォントを選択できます。

Webフォントの導入方法

Webフォントを利用するには、以下の方法があります。

1. Google Fontsを利用する

弊社では主にこの方法でWebフォントを設定しています。
Google Fontsは無料で利用で商用利用できるWebフォントライブラリなのでライセンスの厳しいフォントも安全に利用することができます。
GoogleのサービスなのでSEOの観点からもおすすめの方法です。

2. Adobe Fonts（旧Typekit）を利用する

Adobe Fontsは、Adobe Creative Cloudの一部として提供されている有料サービスです。プロフェッショナル向けの高品質フォントが豊富に揃っています。
使っていたフォントがサービスから突然削除されたりCreative Cloudのサブスクリプション契約の更新が切れるとフォントが利用できなくなるリスクや読み込み速度が遅くなる可能性があるためwebフォントとしては利用する際は注意が必要です。

3. フォントファイルを自分でホストする

独自フォントを使用したい場合、サーバーにフォントファイルをアップロードし、@font-faceを使ってCSSに指定します。
ですが、@font-faceを使ってサーバーにホストしたフォントは、CSSやHTMLソースから簡単にURLを特定され、直接ダウンロードされる可能性があります。
有料のフォントなどをこの方法で利用すると重大なライセンス違反となってしまう可能性があるので要注意です！！！

見やすいWebフォント

主に病院や企業のWebサイト制作をしている弊社ではフォントでも「見やすさ」や「伝わりやすさ」を重視しています。
そこでコーディングの際に現場で私が出会った見やすいフォントをいくつか紹介します！

1. Noto Sans Japanese

GoogleとAdobeが複数のフォントメーカー・デザイナーと共同開発したゴシック体（あるいはSans-serif）のフォントファミリーです。
言わずと知れたフォントですが、このフォントのすごいところは収録文字数の多さです。
“Noto”とは”No  tofu”の略で収録されていない文字が表示されると表示される「豆腐」が表示されないような「表示できない文字がない」ことを目指して作られた夢のようなフォントです。「サムネイル」の背景にしている「ビャンビャン麺」はほとんどのフォントでは表示できないのですがこのフォントなら表示が可能なんです！更新の業務の際などに珍しい漢字が出ることもあるので大変助かります。

それだけでなく洗練されたデザインとウエイトや文字幅などをユーザーが自由に調節できる「バリアブルフォント」の一面も持つすごいフォントです。

2.Zen Kaku Gothic

Zen Kaku Gothicは、少し小ぶりで読みやすく、すっきりとした上品さも感じられる日本語フォントです。NewとAntiqueの二種類がありますが、漢字・アルファベット・数字は共通しており、ひらがなとカタカナにそれぞれ違いがあります。Newは文字自体のクセが少ないことで現代的でモダンな雰囲気、一方Antiqueはわずかに手書きを感じさせるナチュラルさと、原稿用紙に書かれたような幅と高さの統一感を感じさせる雰囲気を持っています。

個人的には「し」の少しカクッとした独特の書体が面白くて好きです。

3.LINE Seed

このフォントは残念ながらGooglefontにないため悔しくもwebフォントとしては利用できなかったのですが、英語と日本語どちらも同じ印象を与えられるフレンドリーで見やすいフォントです。LINEの利便性とフレンドリーなアイデンティティをもとに作られたLINEの新しいフォントなのですが、公式サイトもとってもかっこよくて感動しました。
デザイナーさんに「これ使えたら」という形で紹介していただいた時はぜひ使いたいと思ったのですが、現時点ではgooglefontにないため、安全を優先して利用を諦めたのですが以前は登録されていたようなのでまた復活することがあれば使ってみたいです！

まとめ

今回記事をまとめていて、改めてWebフォントは奥が深いなと思いました！
基本的な内容ではありますが、ライセンスの問題なども影響するため、しっかり理解をして今後も知見を広げていきたいと思います。