制作のご相談はこちら
ドラッグ&ドロップで簡単にfont-familyの値が決められる「Font-familyメーカー」

公開日 : 2018年01月18日

ドラッグ&ドロップで簡単にfont-familyの値が決められる「Font-familyメーカー」


毎回font-familyの記述に悩んでしまう方におすすめなのが、Font-familyメーカーです。
ドラッグ&ドロップで視覚的にフォントを選び、同時にfont-familyのソースを吐き出してくれます。

Font-familyメーカーの使い方

Font-familyメーカーの初期画面

フォントファミリーメーカー
一目でフォントが見れるのがいいですね。
こういうフォント系のWEBサービスは読み込みが遅い場合があるのですが、このサイトは読み込みが速いです。

有名サイトが使用しているフォントを参考にする

twitterのサンプルフォント
facebook、twitter、Yahoo、WIRED、BuzzFeed、Font-familyメーカー制作者のおすすめフォントのいずれかを選択できます。
リセットする場合は画面右のリセットボタンをクリックしてください。

表示されている内容

表示内容
大きく3カラムに分かれていて、左からWindows、Mac、iPhone/iPadとなっています。

各フォントの情報の見方はこちらです。(メイリオのオレンジ文字参照)
①…フォント名
②…表示例(テキスト)
③…表示例(画像)
④…対応OS、バージョン
※②は端末にフォントが入っていないと表示されません

ドラッグ&ドロップ、そしてコピー

フォント名をドラッグ&ドロップ
使用したいフォントを画面下のグレーゾーンにドラッグ&ドロップします。
すると画面最下部に選んだfont-familyのソースが自動生成されています。
ダブルクリックでコピーできるようになります。

追加したフォントを削除したい場合は画面右のゴミ箱エリアにドラッグ&ドロップすると削除されます。

背景が灰色になっているフォントは追加済のフォントです。
また、追加済みのフォントの並び順も変えることが出来ます。優先的に使いたいフォントを前に並べてください。
日本語フォントを前に持ってくると英語も日本語フォントで適用されてしまう場合がありますので、日本語が読み込めない英語フォントを前に持ってくることをおすすめします。

Font-familyメーカー

Font-familyメーカーの制作者が書かれた使い方ページもございます。
font-familyの書き方まとめ:CSSでフォント種類を指定しよう