June 25, 2009

Cufonの使い方

Cufón

Webページのテキストを好きな書体で表現できるJavaScript、Cufónを試してみました。
DEMO

通常、Webデザインでタイポグラフィを表現しようと思えば、CSSのfont-familyプロパティで指定するか、画像で文字を作ります。しかし、font-familyプロパティはWebページが表示されるパソコンに指定したフォントがインストールされている必要があり、画像で文字を作るのもあまりスマートなやり方ではありません。

CufonはHTMLのテキストを好きな書体で表示させることができる仕組みです。
フォントファイルをJavaScriptファイルに変換し、そのJavaScriptファイルでテキストを置き換えます。
同じような仕組みでsIFRというのがあり、こちらはFlashのswfファイルに置き換える方法です。

残念ながら日本語フォントは文字の種類が多すぎるので使えません。
数字と記号を合わせても100文字前後でおさまるLatin文字だからこそ可能な方法です。

以下に利用手順を説明します。

Cufonファイルを入手

まずCufónファイル（cufon-yui.js）を入手します。

フォントファイルをJavaScriptに変換

次に使用したいフォントファイルを用意し、Font GeneratorサイトでJavaScriptファイルに変換します。
利用できるフォント形式はTrueType (TTF)、OpenType (OTF)、Printer Font Binary (PFB) 、 PostScriptです。

  1. 一番上の「Regular Typeface」というフィールドで変換するフォントファイルを選択
  2. 「The EULAs of these fonts allow Web Embedding (without Adobe Flash)」というチェックボックスをチェック
  3. 「Include the following glyphs (if available)」欄の「Basic Latin」にチェック
  4. 一番下の「I acknowledge and accept these terms」にチェック
  5. 「Let’s do this!」を押す

これで変換されたJavaScriptファイルがローカルの任意の場所に保存されます。
（細かいオプション設定はお好みで。）

HTMLファイルの記述

Cufonファイル、フォントファイルがそろったところで、HTMLの記述をします。

<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="Fertigo_Pro_400.font.js"></script>

<script type="text/javascript">
	Cufon.replace('h1');
</script>
<script type="text/javascript">
	Cufon.now();
</script>

「Fertigo_Pro_400.font.js」という箇所は使用するフォントのファイル名に置き換えてください。
上の例では、h1タグにフォントを適用しています。
Cufon.now();というのはIEで動作させるために必要な記述です。ページの一番最後、bodyタグを閉じる前に記述しますが、Google Analyticsなどの外部スクリプトよりは前に記述してください。

Cufonだけではタグ名でしか変更する箇所を指定できませんが、jQueryやPrototypeなどのJavaScriptライブラリと併用することで、自由に指定することができます。

jQueryでセレクタを使う

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="Fertigo_Pro_400.font.js"></script>

<script type="text/javascript">
$(document).ready(function() {
	Cufon.replace($('h1.cufon'));
	Cufon.now();
});
</script>

２種類以上のフォントを使用する場合

２種類以上のフォントを使用する場合は以下のようにします。

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="Fertigo_Pro_400.font.js"></script>

<script type="text/javascript">
	Cufon.replace('h2', {
		fontFamily: 'Fertigo Pro'
	});
	Cufon.replace($('p.cufon'), {
		fontFamily: 'PicoBlackAl'
	});
	Cufon.now();
</script>

Anchorタグのホバリング

Cufonが適用されたAnchorタグ（Aタグ）にホバリング（オンマウス）の動作を加えたい場合は以下のような記述が必要になります。

	Cufon.replace('h2', {
		fontFamily: 'Fertigo Pro',
		hover: true,
		hoverables: { a: true }
	});

とりあえず完成

これでひとまず完成です。
DEMO（仮）

@font-face規則との併用

Safari4やFirefox3.5ではCSSの@font-face規則により独自のフォントで表示することが可能です。Cufonを使うよりも@font-faceが使えるブラウザではそちらを優先させた方がスマートです。

  1. 指定したフォントが使える場合は、@font-faceやfont-familyプロパティを優先
  2. 指定したフォントが使えない場合は、Cufonで置き換え

という方法をとります。

表示しているブラウザで指定したフォントが使用可能かどうかを調べるためにRemy Sharpさんが作ったfont.jsを利用しました。
（Kilian ValkhofさんのサイトではfontAvailable.jsを使用していますが、どうにも@font-faceで指定したフォントがうまく認識されませんでした。）

完成

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/font.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/PicoBlackAl_800.font.js"></script>
<script type="text/javascript" src="js/Fertigo_Pro_400.font.js"></script>

<script type="text/javascript">
$(document).ready(function() {
font.setup(); // run setup when the DOM is ready
	if(!font.isInstalled('Fertigo Pro')) {
		Cufon.replace('h2', {
			fontFamily: 'Fertigo Pro',
			hover: true,
			hoverables: { a: true }
		});
	}
	if(!font.isInstalled('PicoBlackAl')) {
		Cufon.replace($('p.cufon'), {
			fontFamily: 'PicoBlackAl'
		});
	}
});
</script>

<script type="text/javascript"> Cufon.now(); </script>

スタイルシート

スタイルシートには@font-face、font-familyを記述します。

@font-face {
	font-family: "Fertigo Pro";
	src: url(Fertigo_PRO.otf) format("opentype");
}

@font-face {
	font-family: "PicoBlackAl";
	src: url(Pico-BlackAl.ttf) format("truetype");
}

h2{
	font-family: "Fertigo Pro", sans-serif;
}

p.cufon{
	font-family: "PicoBlackAl", sans-serif;
}

DEMO

Cufonの問題点

  • 日本語が使えない。
  • マウスカーソル等で文字が選択できない。
  • 著作権の問題からフリーフォントでのみ利用可能。

このデモでは、Fertigo PROとPicoというフリーフォントを使用しました。

@font-faceが手軽で扱いやすく一番よいのですが、各ブラウザが対応するにはもう少し時間がかかりそうです。また、フォントファイルをそのまま読み込む仕組みのため、著作権上の問題もあります。しかし、その辺の問題をクリアするTypeKitというプロジェクトが今進められているようです。
今後、@font-faceが広まれば、Webデザインのタイポグラフィがどんどん面白くなりそうな気がします。



Category: CSS, HTML, JavaScript, Tutorial | Trackback URL

ONE COMMENT

Comment RSS feed for this Article
  1. クリス
    April 8, 2011

    日本語でCufonが使えたらいいですよね！

7 TRACKBACKS

  1. By @fontface 以外で任意のフォントを使う方法 | Nutspress on 03/10/2010 at 8:36 PM

    [...] 関連参照サイト： Cufonの使い方 WP-Cufon：：：Wordpress [...]

  2. By Cufonの設定 « Shunsuke Sawada on 07/13/2010 at 12:31 AM

    [...] で、ブログ記事のタイトルが表示されない問題について、 和文フォントが表示されない件、調べました。 このブログテンプレートはCufonというライブラリが使われていて、これが和文フォント非対応みたいです。とりあえず32行目あたりのこのライブラリの読み込みを消してみては。http://www.netch.jp/articles/2009/06/25/cufon/ [...]

  3. By 【特別編】Cufon.js | JavascriptLibrary on 09/03/2010 at 12:23 AM

    [...] ⇒　Cufon.js 参考サイト　⇒　Netch カテゴリー: sample   パーマリンク ← [...]

  4. By Cufonを使ってみた。Webページのテキストを好きな書体で表現できるJavaScript。 - PLUS++ on 11/22/2010 at 1:46 PM

    [...] 下記URLを参照。 http://www.netch.jp/articles/2009/06/25/cufon/ [...]

  5. By Customize wordpress theme « BLOW-UP on 01/19/2011 at 2:11 PM

    [...] 結構めんどくさい過程を通らなければならないようです。 [...]

  6. By テーマを適用したら日本語が表示されない on 11/17/2011 at 2:34 AM

    [...] いくつかの海外テーマを比べてみて、共通点を見てみるとどうやらcufonという「Webページのテキストを好きな書体で表現できるJavaScriptのもの」が存在することがわかった。で、「cufon 日本語」でｇｇってみると、Cufonの使い方というページを発見 [...]

  7. By WordPressの海外テーマを適用したときに題名の日本語が消えてしまう | rakkyooの備忘録 on 11/18/2011 at 8:08 AM

    [...] Cufonについては， Cufonの使い方 – NetchCufonはHTMLのテキストを好きな書体で表示させることができる仕組みです。 [...]

POST A COMMENT