Webデザインで使用したフォントが実際のWebページでどんな見栄えなのか、それを確認をするには色々と手段があるかと思いますが、素早く確認できる手段として「font dragr」を利用するのも一つの手かもしれません。
目次
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」のボタンをブラウザのブックマークバーにドラッグしてブックマークレットを登録します。
ブックマークレットを登録したら、試したいサイトにアクセスして、登録したブックマークレットをクリックします。すると下記のようにページ上部に専用のツールが表示されます。
そしたら、試したいフォントを予めデスクトップに保存しておきます。今回は、商用にも使える！おすすめの数字フォントの記事で紹介した、Origamiという見た目の分かりやすいフォントを使ってみたいと思います。
フォントをブラウザにドラッグ＆ドロップします。
フォントをドラッグ＆ドロップすると、下記のようにWebページに表示中のフォントが切り替わることが分かります。Origamiのフォントは平仮名、カタカナにしか対応していませんが、このように簡単にWebページ上でフォントを適用して確認することができます。
よく見ると一部、pタグ以外の箇所は適用されていないようです。その場合には、画面上部の「selector」にタグを入力して「Apply」をクリックすれば、それ以外の箇所にも適用できるようになります。
関連記事
