ドラッグ&ドロップでフォントのテストができるfontdragr.com

font dragr

開発関連のツールやリソースを調べていて見つけた fotdragr.com。
フォントをドラッグ&ドロップする事で表示テストを行う事ができます。
ここでは使い方を簡単に説明します。

はじめに

カスタムフォントの表示をWebブラウザ上でサクッとテストできるサイトを見つけたので紹介します。
普段とは毛色が違いますが。

font dragr

font dragr

読みは "フォント ドラッガー" でしょうか。
フォントをドラッグ&ドロップして表示のテストを行う事ができます。

  • コーディング不要
  • アップロード不要

必要なのはドラッグ&ドロップのみ

というのが売り文句のようです。

font dragr
拡大
font dragr

対応ブラウザ

サイトの "How do I use it?" に対応ブラウザが記載されています。

  • Firefox 3.6+
  • Chrome 6+

Such as ... とあるので上記以外でも動作するかもしれませんが、これらブラウザで実行するのが確実です。

尚、私の開発環境が Windows ( 8.1 ) のため、以下作業手順は Windows を想定したものになります。

使い方

使い方を説明します。

font dragr で確認する

  1. フォントをドラッグ&ドロップ
    サイトの "Drag your fonts here" 部分にフォントをドラッグ&ドロップします。
    Windows の場合、[ コントロールパネル ] > [ フォント ] をクリックすると、インストールされているフォントが表示されるので、ここからドラッグ&ドロップしてみます。
    ( 任意のフォルダにあるフォントファイルをドラッグ&ドロップする事も可能です )
    font dragr ドラッグ&ドロップ
    ドラッグ&ドロップすると "Drag your fonts here" 部分に ドラッグ&ドロップしたフォントが追加されます。

    ※拡張子が ttf のフォントでないとエラーが発生します。このため Windowsの"HG..."フォント系 ( 拡張子 ttc )" はドラッグ&ドロップできませんでした。

  2. 追加されたフォントの表示を確認する場合、画面右上にある [ Editor ] タブをクリックします。
    font dragr 表示確認
    タブメニューの下に追加したフォントがリストされているので、ここから表示したいフォントを選択、クリックする事で表示を確認できます。

任意のサイトで確認する

font dragr 以外で確認する方法もあります。
自分が管理しているサイトを含めた任意のサイトでフォント表示を変える事が可能です。

  1. まず font dragr のブックマークレットをブックマークします。
    ブックマークレットはブックマークから呼び出してWebページに細工を施す事ができるプログラムといえばよいでしょうか ( 詳細な説明は割愛。興味がある方は適当なサイトで調べて下さい )。
    font dragr bookmarklet
    font dragr Home の "You can test on any website" 下に見た目ボタン風の [ font drgr ] リンク があるので、これをブックマークします。
  2. フォント表示のテストを行うサイトを表示します。
    当然ですがブックマークレットをブックマークしたブラウザで。
  3. テスト対象ページが表示されたら追加したブックマークレットをクリックします。
    ブックマークレットを実行すると、ページ上部に font dragr 用の UI が表示されます。
    font dragr bookmarklet
  4. Fonts: ( "Drag and drop a font" ) 欄に、フォントファイルをドラッグ&ドロップします。
    以下は 弊社サイト ( 変更が判りやすいよう英語ページ )で試した結果です。
    font dragr bookmarklet test
    イントラネット上のページ ( Apache 上の htmlファイル ) でも動作確認できたので、殆どの環境で実行可能なのではないかと思われます。
  5. デフォルトでは ドラッグ&ドロップしたフォントは "body > p" に対して適用されます。別の要素に適用したい場合、Selector: 欄で適用したい要素を指定して、[ Apply ] ボタンをクリックします。

    ※上画像では Selector = "*" にして全要素に適用してみました。

まとめ

「便利かもしれないけど、そんなに使うケースねーよ!」と言われそうな気もしますが、知っておけばいつか便利に使う事ができるかもしれません。

私はバナー作成用のテンプレHTMLでも作って、バナー用フォント選びにでも使ってみようかと思っています。実際やるかまだ分かりませんが。