ウェブサーバーで公開されているフォント。ローカルの方でインストールされていないフォントでも、ページを読み込む際にフォントも読み込むことで、そのフォントを使う（表示する）ことができる。 　フォントが違うとウェブページの製作者が意図したとおりに表示されず、レイアウトが崩れたり、単純に読みにくくなったりする。Webフォントを利用することでこういった問題を避けることが出来る。

　ここでは種類が豊富で使い方が簡単な「Google Fonts」を紹介する。 　Google FontsはGoogleが提供するWebフォントのサービス。 左上の「Categories」、「Language」、「Font properties」から要素で絞り込むことが出来る。 フォントのページに飛ぶと下の図のようにサンプルが並んでいる。 右の「+ Select this style」をクリックすると右側に「Selected Family」というバーが出てくる。 出てこないときは右上のタイルのようなアイコンをクリックする。 　このフォントをウェブ上で使うには、「Use on the web」の一つ目のウィンドウに書かれているものをHTMLファイルのheadに記述し、二つ目のウィンドウに書かれているものをcssに記述すればよい。 　その際クラスなどを適当に与えるのがよい。このあたりの説明はウェブフォントの話から逸れるので割愛する。

　ソースコードなどに用いる等幅フォントは、「Categories」の「Monospace」で絞り込める。 　ただ気を付けないといけないのが、このページのプレビューと実際にページに組み込んだ時の見え方とでけっこう差があることがある、ということである。 　以下にいくつかのフォントについて、FirefoxとGoogle Chromeでソースコードを表示したときの見え方を示す。 Fira Mono (Weight 500) 　良い感じ。爪がある。「g」がちょっと特徴的。 Firefox Chrome Roboto Mono (Weight 500) 　こちらも良い。Fira Monoよりやや丸い（アスペクト比が小さい）。爪は無い。 Firefox Chrome Inconsolata (Weight 600) 　上の二つよりも詰まった感じ。なお私の好みで太めのスタイルを選んでいる。 　本ウェブサイトではソースコードの表示にframe.jsというJavascriptのプラグインを利用している。そのプラグインは縦の長さを自動的に決めてくれるのだが、Firefoxではきちんと得られているのがGoogle Chromeではおかしなことになっている。 Firefox Chrome Anonymous Pro (Weight 700) 　同じく太めのスタイルを選んだのだが、なんだか汚い。拡大するときれいに表示されるのだが、このくらいの大きさだとドットがゴツゴツした感じに映ってしまう。 　高さもGoogle Chromeだと正しく得られていない。 Firefox Chrome