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

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

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

サブセット方式のツール
  • Web Editor
  • CSS Generator
  • Dreamweaver Plugin
リアルタイム方式のツール
  • JavaScript Generator
サブセット方式 リアルタイム方式
更新頻度 少ないサイト 多いサイト
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
使用するファイル HTML HTML HTML HTML
CSS
使用環境 オンライン オンライン オンライン オンライン
使用者 個人/ Blogger Webデザイナー Webデザイナー Webデザイナー
使用用途 Blog
Web制作 		Web制作 Web制作 Web制作

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

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