1.歴史的な背景

かつて、コンピュータでは、ブラウザの違いやデバイスの違いによって、WEBサイトに表示される字体が異なりました。 サイトのページに、気に入った字体を選びデザインしたつもりでも、まったく別のものになるというのは制作者にとっては大問題です。 それは、WEBから送られてくる文字は、デバイスが持っている文字データ（システムフォント）でしか表示できないことが原因でした。
この問題を解決するため、1996年マイクロソフトが複数のフォントをパッケージ化し無料で配布しました。そのフォントはほとんどの デバイスに導入されたため、そのフォントを使う限りにおいては、だれもが、制作者の意図通りのフォントを見ることができました。 このようなフォントを、ウェブセーフフォントといいます。
けれども、2万以上もあるといわれているフォントのごく一部、 アルファベット10種類＋絵文字Webdingsのパッケージでしたので、自由にフォントを使えるようになったわけではありません。
一方で、デバイス間で共通に使えるフォーマットの開発が進められています。「.ttf」(True Type Font)はAppleが独自のフォーマットとして開発し、 のちにマイクロソフトと連携して普及を進めました。
1997年発表の「.otf」(Open Type Font)はマイクロソフトと Adobeとの共同開発でWindows でもMacでも使うことができるフォントです。さらに、他の組織も連携して.ｗoff(Web Open Font Format)、.woff2 (Web Open Font Format2)　と改良されてきました。 これが、2011年のCSS3で「WebFonts」として規格化され、導入するためのコードの記入形式
(@font-face{fontfamily: , src:url( )})などもここで規定されています。
（原文は　 https://www.w3.org/Fonts/ 参照）

2.仕組み

フェブフォントの仕組みは、フォントデータを、端末ではなく、WEB上に置いて、HTMLファイルと一緒にダウンロードすることで実現します。
端末が最初に指定のフォントデータを持っていなくても、Webからダウンロードできるので、指定のフォントを表示させることができるのです。

3.実装方法　

使用するフォントデータの置き場所によって、実装方法は以下の2種類になります。
① 自分のWEBサイト上に置く場合、制作者は、一旦、使用するフォントを配付会社から自分のコンピュータにダウンロードし、それを、 自分のサイトにアップロードします。HTMLページのフォント指定（@font-faceコード）に、必要事項を記述し、自分で作成したフォントフォルダの urlも記述する必要があります。
② フォント配付会社が所有するデータに直接リンクを貼り利用する方法です。これをオンラインフォントサービスといいます。
グーグルフォントやアドビフォントだけでなく、フォントメカーが直接サブスクリプションとして販売しているものも多くあります。
コードは配布会社が用意しているので、コピーして自分のプログラムに貼り付けるだけでよいので簡単です。
4.使用上の注意点
　　・使用料：フォントを使用する場合、有料と無料があります。Googleは無料で、Adobeは他の契約があった場合「無料」です。
有料の場合、契約が切れれば使えなくなるので、その後の対応も考慮しておく必要があります。

付記

なお今回の調査で、フォントには、制作したフォントデザイナーたちの多大な時間と労力が費やされ、 工夫とセンスが凝縮されていることを教えられました。