1. まずはMyFontsのアカウントの取得から

MyFontsのアカウントは無料で取得できます。ユーザー登録することで、フリーフォントがダウンロードできるようになるほか、お得なニュースレターやアルバム作成機能も使えるようになります。お持ちでない方は、これを機に是非登録してみてください。

» MyFontsのアカウント作成は“Sign up now!”から

2. 目的のWebフォントを探す

MyFontsでは、ベストセラーやカテゴリ別、メーカ別など様々な方法でフォントを探すことができます。青色の [+WEB] アイコンがWebフォント対応であるかの目印となっています。
» Std・Pro・CF・OsF？ フォントがもっと分かる！欧文フォントの名前に付いているアレの正体とは？

3. 各ブラウザの描写（レンダリング）を確認する

Webデザインは様々な環境で確認するのが鉄則な世界。特に日本においてはWindows XP+IE6というWebデザイナー泣かせの古い環境が今もなお切り捨てられない状況にありますが、MyFontsには、Webfont browser screenshotsというOSやブラウザ別に描写（レンダリング）を確認できる便利な機能が備わっています（※一部書体を除く）。

特に細い書体はかすれて読めなかったり、逆に太い書体はつぶれてしまって読めなくなっては困ります。また環境によってはRegularではなく、LightやMediumのほうが読みやすい可能性があるため、事前に確認することをおすすめします。

4. 購入するフォントを検討する

ページ右上のタブにあるBuying choicesをクリックして、ラインアップやパッケージを確認します。
PhotoshopやIllustratorなどで使うデスクトップ用フォントと同じで、ファミリーが豊富なフォントは、まとめて買ったほうが断然お買い得ですが、Webフォントの場合、サイトやプロジェクト単位の購入になるので、必要なウエイトだけを購入するのが良いでしょう。

またデスクトップ用フォントとWebフォントを同時に購入すると割引が適用されます。購入したいフォントのAdd to cartボタンを押してショッピングカートに入れます。

5. ライセンス方式を確認する

MyFontsには“Pay Once”と“Pay As You Go”の2種類のライセンス方式があります。試しにいくつかのフォントをショッピングカートに入れてみました。フォントによって値段やページビュー数が異なるのが分かります。

ここで2つのライセンス方式についてまとめてみましょう。

以上を確認したら、Proceed to checkoutを押して支払情報入力画面へ進みます。

6. 支払情報を入力して注文を確立する

基本的にはクレジットカードかPayPalでの支払いとなります。クレジットカードの場合は、まずカードの情報を入力してください。

» 日本の住所を英語で書くには？

“Who is the font for?”にはすでに自分の名前が入っていると思いますが、ライセンス上の契約者の名前を入力します。

また任意で“Where will you use your webfonts?”に設置するURLを入力しますが、MyFonts側が監視することはないそうなのでご安心を。Confirm your cartでカートの中身を最終確認し、問題なければPlace my orderをクリックして完了します。

7. 購入したWebフォントの設置キットをダウンロードする

注文が確立すると、そのままアカウントページの注文履歴 (Order history & downloads) へ遷移するので、Download the Webfont Kitをクリックし、Webフォントデータと設置用のHTMLとCSSファイルが同梱されたキットデータをダウンロードします。

また誤ってウィンドウを閉じてしまったり、データを紛失してしまった場合でも、注文履歴 (Order history & downloads) から再ダウンロード可能です。

8. Webフォントを設置する

HTMLとCSSの知識があるWebデザイナーであれば、キットデータ内のHTMLとCSSの中で必要な部分を用いることで難なく設置できるので、詳しい設置方法は割愛しますが、基本的には次のような記述形式になっています。

Webフォントデータは原則3種類（TTF/WOFF/EOT形式）のフォーマットが同梱されています。OSやブラウザにより対応が異なるので、キット内のHTML・CSS通り3種類のデータを使うようにしましょう。

/*=====@font-faceでWebフォントを定義する=====*/
@font-face {
font-family: '任意のフォント名';
src: url('XXX.eot');
src: url('XXX.eot?#iefix') format('embedded-opentype'), /*EOT形式*/
url('XXX.woff') format('woff'), /*WOFF形式*/
url('XXX.ttf') format('truetype'); /*TTF形式*/
}

/*=====font-family:で定義したフォント名を指定する=====*/
h1 { font-family:  '任意のフォント名'; }
.font { font-family:  '任意のフォント名'; }

▼HTML側

任意のフォントで表示される
任意のフォントで表示される

上述の通り、MyFontsのWebフォントのライセンスにはPay OnceとPay As You Goの2種類があります。後者のPay As You Goのほうは、完全買取というよりは、指定ページビュー数をレンタルすることになります。キットデータ内のCSSデータにある、カウント用@importの規定記述を忘れずに入れておきましょう。

@import url("//hello.myfonts.net/count/XXX");

Q1. 太いフォントの描写が潰れてしまうのを解消する方法は？

<h1>や<strong>などのHTMLタグは、Bold（太字）のWebフォントを適用させると、HTML上でさらに太字の処理が加わってしまうため文字が潰れて見えてしまいます。

キットが生成したHTML・CSSを使うと潰れて見えてしまう場合は、一旦スタイルを初期化する font-weight: normal; の記述があるかどうか確認してみてください。Webfont Kit BuilderにてRegular/Italic/Bold/Italicの関連付けをすることもできます。

h1 {
font-family: myFont;
font-weight: normal;
}

Q2. Webフォントデータの収録文字数を減らしてデータを軽くしたい（サブセット化）

Webfont Kit BuilderのCharacter Setsにて中欧・東欧言語の有無のほか、若干使いづらいですが、特定の文字を指定するなど細かく指定することができます。

Q3. 合字（リガチャ）やスモールキャップなどのOpenTypeのフォント機能を使いたい

合字（リガチャ）やスモールキャップなどのOpenTypeのフォント機能 (OpenType features)を使いたい場合、デフォルトでは容量削減のため文字データが省かれているため、Webfont Kit BuilderのOpenType Layoutにて、Keep All OpenType Layoutにチェックを入れ、新たにWebフォントデータを生成します。

すべてのグリフデータを含むことになるため、必然的にファイルサイズが膨大化してしまうほか、まだOpenTypeのフォント機能をサポートするブラウザが限られていますので、実装するか否かは慎重に判断しましょう。

またフォントが、どのOpenTypeのフォント機能を搭載しているか事前に確認するには、各フォントのTech SpecsのOT Featuresにて確認できます（» Sinaの例）。

» 次期Firefox 4ではOpenTypeフォントの機能をCSSから制御できる
» IE10がFirefoxに続きOpenTypeのフォント機能に対応

フリーでダウンロードできるWebフォントSinaを使ってfi, fl, fflなどの合字（リガチャ）の適用サンプルを作ってみました。Firefox 4以上でご覧いただけます。
» Sina (通常版) WOFF形式：42KB
» Sina (OpenTypeのフォント機能を適用) WOFF形式：80KB

Q4. 旧iOSでも表示できるようにSVG形式のWebフォントデータを使いたい

Webfont Kit BuildeのKit Options内、FormatsにてSVG形式とSVGZ形式のWebフォントデータを生成することができます。

Q5. Pay As You Goライセンスで購入したWebフォントの消費したページビュー数を確認したい

Pay As You Goライセンスで購入すると、注文履歴 (Order history & downloads) にWebfont Usageの項目が表れます。現在消費しているページビュー数を確認できるほか、ページビュー数を追加購入することもできます。

Q6. 過去にMyFontsで購入したデスクトップ用フォントをWebフォントとして（割引価格で）購入したい場合は？

MyFontsではデスクトップ用フォントとWebフォントを同時に購入すると割引を受けることができますが、購入のタイミングがずれてしまった場合でも、注文履歴 (Order history & downloads) にあるLicense Dashboardにて、割引価格で購入することができます。

注文履歴から指定のフォントを選びUpgradeボタンを押し、1ヶ月のページビュー数の目安をフォームに入れ、Calculate priceボタンを押すと再計算されます。金額を確認してAdd to Cartボタンを押して注文を確立してください。

Q7. 一度購入したWebフォントは複数のサイトで使ってもよい？

MyFontsが運営するWebfonts.infoのFAQにも書かれていますが、そのサイトの種類やクライアントとの関係によるのでケースバイケースになります。ただ購入時に記入したライセンス名＝ドメインの管理者とした場合、基本的に複数のサイトでの利用はNGとなります。例えばAとBという案件があった場合、それらは基本的に別扱い、つまりドメイン単位＝プロジェクト単位での利用が自然になるかと思います。そうしないとページビュー数そのものが管理できません。

Q8. MyFontsで購入したデスクトップ用フォントを変換ツールを使ってWebフォントとして使ってもよい？

MyFontsでの購入に限らずですが、絶対にNGです。訴えられて面倒なことになり、社会的信用を失わないようにしてください。

Q9. アップしたWebフォントデータをダウンロードできないようにするには？

.htaccessに次の記述を追加し、フォントデータがあるフォルダにアップロードします。こうすることで、指定している拡張子のファイルへのアクセスを拒否できます。http(s)?://(www\.)?hogehoge\.comの部分は、ドメインにより記述を変更してください。
※.htaccessの設置方法等は割愛しますので、解説や注意事項は他のサイトをご覧ください。