Webフォント導入の近道となるオリジナルツール

Webフォントの利用にあたって、HTML、CSS、Javascriptの知識が必要となりますが、ダイナコムウェアではそれらの知識がない方・知識が不十分な方でも簡単にWebフォントを使用できるようにいくつかのツールを準備しました。ページ内容の更新頻度や制作方法に合わせて選択の出来るツールです。

DynaFont Onlineは4つのツールを提供します:

サブセット方式のツール
  • Web Editor
  • CSS Generator
  • Dreamweaver Plugin
リアルタイム方式のツール
  • JavaScript Generator
その他技術支援のツール
  • Font Extractor
  • Web Service API
サブセット方式 リアルタイム方式
更新頻度 少ないサイト 多いサイト
Webフォントへの表示スピード 速い 遅い※サブセット方式と比較して
内容編集のステップ 多め 少め※サブセット方式と比較して

サブセット方式のツールでは、Webフォント化するフォントデータをあらかじめ抽出し、Webフォントに最適なフォントファイルデータ(WOFF・EOT他)に変換してDFOサーバーに保存します。Webサイト にアクセスがあった場合は、DFOサーバーからフォントデータが配信されてWebサイト に表示されます。Webフォントとして表示する文字をあらかじめ抽出しておくため、表示スピードが速いのが特徴です。
※内容更新・編集の際には抽出する文字を再度設定する必要があるため、更新頻度の低い静的なページでの利用を推奨しています。
※書体の変更もツールで行う必要があります。
※閲覧デバイスやブラウザの環境、Webコンテンツ構成により、Webフォントへの切り替わり時に画面にチラつきが出る可能性があります


リアルタイム方式の場合は、WebサイトにアクセスがあるごとにWebフォント化する文字データの抽出・解析・配信を行う方式です。動的なページでの利用で効果を発揮します。導入・編集の手間がかからないことが大きなメリットになります。ツールで生成したスクリプトタグをHTMLファイルの指定の場所に挿入し、CSSファイルのfont-familyで書体指定するだけで完了です。
※編集時には記載済みの文章の書き換え、新規で書き込むだけで終了です。
※書体を変更したくなったらfont-familyの書体名を変更します。
※閲覧デバイスやブラウザの環境、Webコンテンツ構成により、Webフォントへの切り替わり表示までに画面にチラつきが出ます。


DynaFont Onlineは使用者がニーズに合わせ、最適な方式を選択できるように、以下のツールを用意しました。

Web Editor CSS Generator Dreamweaver Plugin JavaScript Generator Font Extractor Web Service API
使用するファイル HTML HTML HTML HTML
CSS
プログラミング
HTML
CSS
プログラミング
HTML
CSS
使用環境 オンライン オンライン オンライン オンライン オフライン オンライン
使用者 個人/ Blogger Webデザイナー Webデザイナー Webデザイナー プログラマー
Webデザイナー
プログラマー
Webデザイナー
使用用途 Blog
Web制作
Web制作 Web制作 Web制作 電子書籍
アプリ・ゲーム
Web制作
電子書籍
アプリ・ゲーム
Web制作

変換可能なデータ形式について

DynaFont OnlineはIE8以下向けのEOTファイル、Chrome、FireFox、Safari用のWOFFファイルに対応しています。メインとなるのはこの2種類のファイルへの変換ですが、技術サポートツール内のDynaFont Online Font Extractorを使用することでSVGFont(ベクトル図形の拡大縮小)、Flash用のSWF、最新のWOFF2への変換が可能になります。

EOT WOFF SVG Font SWF(TLF) WOFF2
対応プラットフォーム
(PC)
IE6~IE8 IE9以降
Chrome6以降
FireFox3.5以降
Microsoft Edge
Safari3.1以降 - FireFox、Chrome、Opera
※比較的新しいバージョンのみ対応。
サイズ比較
(TTFファイル時と比較)
約40%縮小 約40%縮小 約60%縮小
特徴 IEのみに対応 各ブラウザに対応 拡大縮小可能なベクトル図形のみで使用 Flashのみで使用 Webフォントの最新規格。
※今後各ブラウザが対応していく予定
変換可能なツール 全てのツール 全てのツール Font Extractor
Web Service API
Font Extractor
Web Service API
Font Extractor
Web Service API

Webフォントのテキスト装飾に関して

テキストを画像化した文字の場合、編集ソフトを使うことで様々な装飾を施すことが可能です。 Webフォントはそれが出来ないのでは?と考える方も多いと思いますが、弊社ツールのWeb Editorであればボタン1つで下記のような装飾が可能です。 ホームページ内の見出しだけでなくクリックボタンなど細かいこところで装飾を施すと、あなたのホームページをより魅力的にすることが可能です。