JavaScriptでフォントを変更するCufonの設定(上級)

Cufonウェブページ上で、任意のフォントを表示する仕組みです。
ただし、日本語には対応していませんので、日本語を表示したい箇所でCufonが使用されている場合は、削除する必要があります。

半角英数字のみのフォントであれば、種類を問わず自分のコンピューターからJavaScriptに変換できます。
その後は、scriptタグで読み込めばウェブページにフォントを埋め込むことができます。
フォントを変換する前に、あらかじめ文字コードを設定したり、特殊文字をhtmlで記述するなどの処理を行っておくとよいでしょう。特定のウェブアプリケーション上でフォントが表示されやすくなり、SEO対策にも有効です。

テンプレートにCufonが付属していて、フォントを追加・変更する場合は下記の作業を行ってください。

1. はじめに、テキストに使われているフォントの種類を確認します。

テンプレートパッケージの中の、sources(+symbols)/psdフォルダの中から、変更したいフォントが含まれているページのPSDファイルをAdobe Photoshopで開きます。
テキストツールで該当のテキストをクリックまたはドラッグして選択します。オプションバーのドロップダウンメニューからフォントを選びます。

cufon01
Photoshopのオプションバー上のフォントファミリー設定ドロップダウンメニュー

2. 続いて、特殊文字を使用する場合は、選択したフォントにテンプレートで使用する特殊文字が含まれているかどうかを確認します。

パソコンで作業している場合は、Windows用のフリーソフト「Font Runner」を使用すると、fontファイルを任意のフォルダに分けて管理することができます。また、対応した文字であれば、一つひとつのフォントを拡大して確認したり、デザインを変更してプレビューすることもできます。

Font Runnerのインストール完了後、ソフトを起動し、左のメニューからパソコン上でフォントが置かれているフォルダを選択します。

(例:C:\WINDOWS\Fonts)

02

右側のパネルにインストールされているフォントが表示されます。探しているフォント名の頭文字を入力すると、該当のフォントが選択されます。
次に表示モードを“Font Map”に変更します。

03

注意:“Font Map”パネル上で特殊文字が表示されない場合は、そのフォントでは表示できないということですので、表示できるフォントを選択してください。類似したフォントを探すには、オンラインの「What The Font」というサービスを利用するとよいでしょう。

3. Font Generatorサイトにフォントファイルをアップロードして使用するフォントのJavaScriptファイルを作成します。

使用するフォントファイルをデスクトップなどのアクセスしやすい場所にコピーします。このフォントはテンプレートで使用されるので、使用言語の特殊文字を表示できるものか、表示可能なほかのフォントを選びます。

Font Generatorサイトで、“Regular Typeface”(標準)“bold”(太字)“italic”(斜体)“bold italic”(太字+斜体)いずれかを選び、使用するフォントファイルを選択します。

注意:現在サポートされているフォントの形式はttf(トゥルータイプフォント),otf(オープンタイプフォント),PFB(プリンタフォントバイナリ)です。
フォントがウェブページで使用可能なことを確認し、EULAと書かれている使用許諾のボックスに必ずチェックを入れてください。

04

Include the following glyphs (if available) 」(含有シンボル選択)フィールドで、シンボルを選んでおくと、選択したシンボルを含むフォントファイルが保存されます。

注意:

  • 選択するシンボルが多ければファイルのサイズも大きくなるため、ウェブサイトの読み込み速度を落とさないよう、選択するシンボルを制限する必要があります。
  • 通常は、Basic Latinのみチェックをいれ、残りは必要に応じて選択してください。

05

選択する際に、こちらのサイトを利用すると、各カテゴリーにどのようなシンボルが含まれるのかを確認することができます。

チェックボックスの一番下の「.. and also these single characters」テキストボックスには、その他の特殊文字を含める場合、一行に半角アルファベットの小文字と大文字の両方で記入します。
例:aAbBcC

以降のオプションは変更せず、初期状態にしておくことを推奨します。
一番下にある「Terms」(利用規約)のボックスにチェックを入れて同意し、「Let’s do this」のボタンをクリックして、変換をスタートします。

06

4. 変換の完了した「.js」ファイルは、アップロード前であれば、自分のサイトの「js」フォルダに保存します。すでにサイトをアップロードしている場合は、後でjsファイルをアップロードできるようデスクトップに保存しましょう。

5. すでにCufonを使って、既存の文字列に特殊文字を埋め込んでいる場合は、jsフォルダ内の現在のCufonのjsファイルを今回新しく作成したjsファイルに差し替えるだけです。ファイル名を元のファイルと同じにすると、フォルダ内に新しいjsファイルを移動した際に、「ファイルを上書きしますか」というダイアログが表示されるので、「はい」をクリックします。
既存のCufonのjsファイルと別のフォントで新たなjsファイルを作成した場合は、以下の手順を踏んでください。

6. 新しく作成したjsファイルの名前をコピーします。(F2を押し、CtrlキーとCを押すとコピーできます)

7. index.phpもしくは、index.htmlファイル(ファイル形式はテンプレートのタイプによります。)をテキストエディタもしくはDreamweaverで開き、変更したいフォントの名称をCtrl(Macの場合はComand)+Fを押して検索します。(名称を確認するにはこのページの手順の1を参照します。)検索すると、以下のようなソースコードが見つかります。

<script type="text/javascript" src="js/ファイルの名称.js"></script>

次に上記のソースコードの「ファイルの名称」の部分を新しく作成したjsファイルの名称(手順6参照)に置き換えて保存します。

8.作成したjsファイルを開き、以下のような記述を探してフォントの名称をコピーします。

font-family:フォントの名称

9. テンプレートのjsフォルダ内のcufon-replace.jsファイルを開き、フォントの名称を既存のものから新しいものに書き換えて保存します。

10. ブラウザで自分のサイトを開き、フォントの種類が変更されたかを確認します。キャッシュを削除し、更新するにはF5を押します。


Comments are closed.