インストール・コーディング不要でフォントを適用したWebページを即確認できるfont dragr

インストール・コーディング不要でフォントを適用したWebページを即確認できるfont dragr

  • このエントリーをはてなブックマークに追加

Webデザインで使用したフォントが実際のWebページでどんな見栄えなのか、それを確認をするには色々と手段があるかと思いますが、素早く確認できる手段として「font dragr」を利用するのも一つの手かもしれません。

関連 フォント名が分からない時に役立つツール3つ

目次

font dragrとは?

font dragrは、デスクトップ上のフォントファイルをブラウザにドラッグ&ドロップするだけで、簡単にWebページ上のフォントをドラッグ&ドロップしたフォントに変更・適用することができるツールです。

フォントをインストールしたり、Photoshopでフォントを実際に適用したり、コーディングする必要がまったくないので、簡単にWebページのフォントの見栄えを確認することができるようになります。

公式サイトはこちらです。
https://fontdragr.js.org/

font dragrの使い方

実際の使い方を見てみましょう。

font dragrは、公式サイトにアクセスして使用する方法とブックマークレットを使う方法がありますが、公式サイトでは英語のみの記載なので、日本語の確認ができません。なので、ブックマークレットを使った手順での紹介となります。

まずは、font dragrのページにアクセスします。
https://fontdragr.js.org/

アクセスしたら「Drag the [font dragr] bookmarklet to your bookmarks.」という箇所まで画面をスクロールさせて、「font dragr」のボタンをブラウザのブックマークバーにドラッグしてブックマークレットを登録します。
font dragrのブックマークレットを登録

ブックマークレットを登録したら、試したいサイトにアクセスして、登録したブックマークレットをクリックします。すると下記のようにページ上部に専用のツールが表示されます。
font dragrのブックマークレットを使う

そしたら、試したいフォントを予めデスクトップに保存しておきます。今回は、商用にも使える!おすすめの数字フォントの記事で紹介した、Origamiという見た目の分かりやすいフォントを使ってみたいと思います。

フォントをブラウザにドラッグ&ドロップします。
フォントをブラウザにドラッグ&ドロップ

フォントをドラッグ&ドロップすると、下記のようにWebページに表示中のフォントが切り替わることが分かります。Origamiのフォントは平仮名、カタカナにしか対応していませんが、このように簡単にWebページ上でフォントを適用して確認することができます。
フォントをWebページに適用するfont dragr

よく見ると一部、pタグ以外の箇所は適用されていないようです。その場合には、画面上部の「selector」にタグを入力して「Apply」をクリックすれば、それ以外の箇所にも適用できるようになります。
font dragrのセレクター設定

関連記事

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

マーツ(その他)

SONICMOOVでは、Webデザイナー、コーダーの経験を経て、Webディレクターに。様々なWeb制作・アプリ開発に携わり、その後、便利な用務員に。Hep Hep!にてeizとして記事執筆中。

関連するSONICMOOVのサービス

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter
Wantedly 採用情報はこちら

新着の記事

mautic is open source marketing automation