フォント好きは要チェック！ 和文フォントと欧文フォントの混植をブラウザ上で簡単に試すことができる便利サイト -MOBULA
Post on:2026年5月21日
sponsorsr
フォントの混植とは、日本語のテキストは和文フォントで、英語のテキストは欧文フォントで表示したり、またよくあるのがひらがなフォントに漢字が揃っているフォントを混植したり、2つのフォントを組み合わせて使用することです。
通常、混植するにはAdobe IllustratorやInDesignなどのソフトウェアが必要ですが、ブラウザ上で混植を試すことができる便利なサイトがローンチされました！
MOBULAは、Google Fontsの全フォントを対象に混植を確認、また混植用のCSSも生成してくれる無料サイトです。制作者様は日本人で、当方にメールでローンチのお知らせが届きました。
利用にあたって登録など面倒なことは一切不要で、完全に無料で利用できます。
制作者様によると「Webの混植デザインはサイト・アプリケーション共にツールが不足していると感じており、欧文・和文フォントの組み合わせをリアルタイムにプレビューできるツールとして開発しました。」とのことです。
確かに、混植に特化されたツールはありそうでないですね。
ということで、さっそく使用してみました。まずは、デフォルトのテキストだと短かったので、和文と欧文が混ざったダミーテキストを入力してみました。
和文と欧文が混ざったダミーテキストを入力
参考: 日本語・英語・数字がそれなりに混じったダミーテキスト
フォントのパラメータは各ブロックの右下から設定できます。まずは、和文に「Noto Sans JP」欧文に「Inter」を使用してみました。
和文「Noto Sans JP」欧文「Inter」の混植
続いて、和文に「M Plus Rounded 1c」を設定。
パラメータでは使用するフォントをはじめ、サイズ、ウェイト、スケール、スタイル、揃え、行間、文字間などを細かく設定できます。
和文「M Plus Rounded 1c」欧文「Inter」の混植
Google Fontsには、UDフォントも揃っています。和文に「BIZ UDPGothic」を設定。
和文「BIZ UDPGothic」欧文「Inter」の混植
明朝系のフォントも揃っています。和文に「BIZ UDPMincho」を設定。
和文「BIZ UDPMincho」欧文「Inter」の混植
混植フォントを使用するには、右下の「<>」をクリックします。
混植フォントを使用するCSSを生成
sponsors
