2012.10.07
css

Webフォントで好きなフォントをブラウザに表示させる

CSS3のWebフォントを使う方法です。

好きなフォントをブラウザに文字として表示させるので、その都度画像として作る必要もないし便利ですね。

そして何よりSEO対策としても良いです。

ただ一部のフォントはIEではなぜかうまく表示されないようです。なぜでしょう?

ではその方法。

一言で言ってしまうと、フォントファイル(例えば拡張子が.ttfや、.otfなど)をサーバーにアップロードして、CSSに必要なソースを記入するだけです。

CSSのソース

@font-face {
  font-family: 'tare';
  src: url('ファイルのパス/MT_TARE_P.ttf') format('truetype');
}
h1 {
  font-family: 'tare';
}

CSSの@font-faceを上記のように記述。

  • 2行目のfont-familyでフォントの名前を定義します。
    これは自分で決めてしまってOK。
    分かりやすくフォント名が無難だと思います。
  • 3行目ではフォントをアップロードした場所の相対パスを記述。
    そしてformatではtruetypeや、opentypeなど、フォントの種類を記述。
  • 6行目では2行目で定義したfont-familyを通常フォントを指定するときのように記述。

これでHTMLでh1を使うときは、@font-faceで定義したフォントで表示されます。

CSSで好きなフォントを表示



今回はたれフォントをいう手書き風のフォントで表示させています。

Attention!
この記事について一部新しく書き直しました!
新しい記事についてはこちらです。
関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP