5 に答える
Simonが指摘したように、CSSの@ font-face宣言を使用して、従来はWebセーフではないフォントをサイトに実装できます。自分で試してみたい場合は、 FontSquirrelのフォントファイルジェネレーターにリンクしている、PaulIrishの今では有名な防弾フォントフェイスの実装をぜひチェックしてください。現在、適切な実装でクロスブラウザがサポートされていますが、ほとんどのフォントではライセンスを処理する必要があり、一貫したレンダリングは依然として問題です。
あなたが質問したサイトは、フォントファイルを（有料で）ホストして提供するいくつかの新しいサービスの1つであるTypekitを使用しており、@font-faceの複雑さを隠す簡単な実装を提供します。GoogleのFontAPIも同様ですが、無料であり、無料のフォントの一部のみをホスト/提供しています。
また、フォントを埋め込むための非ネイティブの代替手法がしばらくの間使用されてきました（ただし、CSSには表示されません）。cufonおよびsIFRを参照してください。
Googleは最近FontAPIをリリースしました、それはあなたにいくらか役に立つかもしれません。
これは、Firefoxで数式を表示するために最近遊んでいたサンプルページです。あなたが（おそらく）最も興味を持っている部分は@font-face、上部のcss宣言であり、タグとタグにstyle="font-family: DejaVu Serif Web;"割り当てられています。<div><math>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>mathy fonts test</title>
<style type="text/css">
@font-face {
font-family: DejaVu Serif Web;
src: url(/fonts/DejaVu/ttf/DejaVuSerif.ttf) format("truetype");
}
</style>
</head>
<body>
<h1>DejaVu Serif</h1>
<div style="font-family: DejaVu Serif Web;">
<p>
Nulla eu commodo neque. Donec nec nisi libero. Integer sollicitudin leo
vel arcu elementum mattis. Vivamus eu sodales odio. Curabitur eu auctor
leo. Pellentesque adipiscing nulla iaculis ante commodo aliquet. Donec
egestas tincidunt tincidunt. Nunc ut condimentum orci. Aenean in egestas
tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Curabitur suscipit, sapien ut dignissim
pellentesque, lacus risus facilisis odio, et tristique nunc quam et
mauris. Quisque pellentesque nulla et dui bibendum suscipit. Aenean
consectetur adipiscing nulla, a molestie nunc semper non. Quisque at
ipsum quis turpis gravida commodo et vel felis. Integer lobortis augue
eu tortor aliquet nec mattis nulla aliquam. Sed ornare cursus urna et
congue.
</p>
<p>
<math style="font-family: DejaVu Serif Web;" mode="display" xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo form="prefix">−<!-- − --></mo>
<mi>b</mi>
<mo>±<!-- ± --></mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>−<!-- − --></mo>
<mn>4</mn>
<mo>⁢<!-- ⁢ --></mo>
<mi>a</mi>
<mo>⁢<!-- ⁢ --></mo>
<mi>c</mi>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mo>⁢<!-- ⁢ --></mo>
<mi>a</mi>
</mrow>
</mfrac>
</mrow>
</math>
</p>
</div>
</body>
</html>
ローカルで表示する場合は、.htmlだけでなく.xhtmlとして保存する必要があります。もちろん、これはfont-faceではなく、数学的なものに関連しているため、このコード全体を使用しようとしている場合の注意事項にすぎません。
ここに、（合法的に）ドキュメントに埋め込むことができるフォントの適切なリストがあります。
Typekitは、書体ファウンドリとのライセンス契約を必要とするフォントを埋め込むための優れた方法も提供します。現在、（選択した）1つのフォントを無料で使用する機能を提供しています。
フォントのリンクはかなり前からブラウザにありました。問題は、使用できる形式にありました。もちろん、Microsoftは独自のフォント形式をサポートしていましたが、Mozillaはサポートしていませんでした。 はぁ
Google Font Directoryは、Webフォントの方向性を理解するための興味深いリソースです。