Google以外のWebフォント素材と使い方

Pocket

DTPなどで使うフォントはパソコンにインストールして使うことができますが、Webサイトの場合、デザイナーのパソコンにあってもユーザー側にインストールされていないとフォントが正しく表示されません。

そんなときに使えるのがWebフォント。これはパソコンにインストールしていないフォントでもきちんと表示できるので、デザインの幅が広がります。

Webフォントと言えばGoogleのはよく知られてますが、それ以外にWebフォントを提供しているところってあるんでしょうか?このページではGoogle以外でWebフォントが使えるサイトを探してみました。

Google以外のWebフォントサイトまとめ

Adobe Edge Web Fonts

Adobe Edge Web Fonts
まずはAdobeのWebフォント。500以上のフォントをアカウント登録なしで無料で使えてしまいます。

使い方はすごく簡単。トップページのGetStartedからフォントページに移動して、欲しいフォントを選択し、HTMLとCSSにコードを追加するだけ。Googleフォントと同じような使い方ができます。
Webフォント-01

Fontsquirrel

Fontsquirrel
Adobeよりさらに多くのフォントが用意されているのがこちら。逆に探すのが大変ですが、いろんなデザインのフォントが揃ってます。

使い方はフォントファイルをダウンロードして@font-faceの設定をするタイプ。ファイルは各フォントページのwebfont kitからダウンロードするか、FontGeneratorを使ってWebフォント化できます。
Webフォント-02

Webフォントの使い方は?

ファイルをダウンロードするタイプのWebフォントでは@font-faceの設定をする必要があります。方法は非常に簡単なので覚えておくと後で役に立つかも。

基本的な使い方やブラウザごとの対応状況などはMDNのページが参考になります。CSSの書き方はこんな感じ。CSS-TRICKSから引用。

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

WebフォントはCSSの設定で簡単に使えるようになります。ただ、ブラウザごとの対応が異なるため複数のファイルを用意する必要あり。それらを@font-faceを使ってsrcの設定を行えばOK。