Font-familyメーカーとは
Font-familyメーカーは、CSS でフォントを指定するときに必要な記述を、簡単にドラッグ＆ドロップ操作で作れるWebツール。
Windows・Mac・iPhone／iPad の標準フォントが一覧で表示されていて、「この環境でどのフォントが使えるか」を見ながら、自分で順番を決めてフォント指定を組み立てられます。
入力ミスを減らしたい人、各デバイスでのフォント対応を見ながらCSSを書く人にぴったりです！
主な機能・特徴
| 標準フォントの一覧 | Windows / Mac / iPhone・iPad に最初から入っている日本語・英語フォントの両方が見られる |
| font-familyの組み立て | フォントを選び、追加や順番変更、削除が可能 |
| 総称フォントファミリーの指定 | 最後に sans-serif や serif などの総称フォントも選べる |
| 他サイトのフォント使用例が見られる | Facebook、Twitter、Yahoo!Japan など有名なウェブサイトで使われている font-family の例が見られ参考にしやすい |
活用例
- 自分の Web ページ／ブログで見た目を整えたいとき
統一感を出すために「どのデバイスでも持ってるフォント＋Webフォント」の組み合わせを作りたいとき - 日本語サイトを作るとき
日本語フォントの文字化けや表示崩れを防ぐため、標準搭載フォントを確認しておきたいとき - デザインカンプをコードに落とし込むとき
フォントが環境によって使えない可能性をチェックしたいとき - 複数の環境でサイトをテストする前の準備
どの OS／端末でどのフォントが使えるか確認しつつ、最良のフォントファミリーを作るとき
使い方
インストール、ログイン不要ですぐに利用可能です！
①下のバーにフォントを追加
Windows / Mac / iPhone／iPad の3列にそれぞれ標準搭載されているフォントが並んでいいるので、使いたいフォントを探し、下のバーにフォントをドラッグ＆ドロップ（複数可能）
最後に「sans-serif」「serif」「monospace」など総称フォントの部分選択
※順番を並び替える
下のバーに並んだフォントをドラッグで順番を変えます。表示させたいフォントを優先させつつ、英語フォントを先に、日本語フォントを後にするのが一般的です（不要なフォントを削除することも可能）
②CSSをコピー
順番が決まったら、下方の黒いバーをダブルクリックするとコピーされます
③CSS内に貼り付ける
コピーしたコードを、自分のCSSファイルまたは
利用規約
| 料金形態 | 無料 |
| 登録・ログイン | 不要 |
| 規約の確認先 | 公式サイト |
調べた範囲で明確な「ライセンス・特許・商用利用制限」などの詳細規約はツールそのものにはありませんが、次の点を考慮しておくのがベストです。
※フォントは標準搭載フォントを使っているものなので、フォントの著作権・ライセンスは元のフォントのものに従うこと（サルワカ側でフォントを配布しているわけではない）
※CSSコードを自分のWebに使うことは自由ですが、フォント自体（特にWebフォントや有料フォント）を別途ライセンス確認する必要がある場合があること
※ツールの動作・表示に関して完全な保証をしていない可能性があるので、「表示崩れ」などが起きた場合は自己責任で調整が必要
※掲載内容は変更される場合があります。必ず【公式サイト】で確認後、自己責任でご利用ください。
注意点
※フォントがユーザーの端末にインストールされていないと表示されない
※ブラウザや OS のバージョンによる差がある
※順序が大事
最初に書いたフォントほど優先されます。表示したいフォントを前に、フォールバック（代替）フォントを後ろに置く工夫が必要。英語用と日本語用を分けて順序を考えるのが基本
※フォントを詰め込みすぎない
フォントをたくさん指定しすぎると読み込みや表示の予期せぬ挙動が増える可能性があります。2〜4種類程度に絞るなど管理しやすい数にするのがおすすめ
