游ゴシック体をWebflowで使う方法

Shohei Yano 2022年4月10日

はじめに

ウェブサイトを制作していると、デザインで游ゴシック体（Yu Gothic）が指定されていることはよくあります。しかし、WebflowではGoogleフォントが標準で用意されている一方、游ゴシックは含まれていません。

そのため、Webflowで游ゴシックを使いたい場合は、以下のいずれかの方法で対応する必要があります。

本記事では、CSSで游ゴシックをFont Familyとして指定する方法を紹介します。

游ゴシック体は、長文でも読みやすいよう設計された日本語フォントです。文字の横幅がやや狭く、行間にゆとりがあるため、可読性が高いのが特徴です。本文やキャプション、見出しなど幅広い用途で使える定番フォントとして、多くのデザインに採用されています。

特にWindowsユーザーにとっては馴染みのあるフォントで、システムに標準でインストールされていることが多いです。

font-familyは、CSSでフォントを指定するプロパティです。WebflowでGoogleフォントを設定した場合でも、実際にはこのfont-familyプロパティによってブラウザにフォントが指定されています。

游ゴシックを使いたい場合、font-familyをCSSで指定する必要があります。Webflowでは「プロジェクト設定」からカスタムコードを使って、全ページに適用することが可能です。

このように記述することで、游ゴシック体がユーザーの端末にインストールされていれば表示され、なければ順にフォールバックフォント（YuGothic → Yu Gothic → sans-serif）へと置き換えられます。

✅ ポイント：游ゴシックはシステムフォントのため、ユーザーの環境に存在しない可能性もあります。そのため、フォールバックフォントを必ず指定することが重要です。

全体ではなく、特定の要素だけに游ゴシックを使用したい場合は、クラスやタグを指定して個別にスタイルを当てましょう。

Webflowで游ゴシック体を使うには、カスタムコードでfont-familyを指定するだけ。Adobe FontsやGoogle Fontsにない日本語フォントも、この方法なら簡単に適用できます。

游ゴシックは読みやすさと汎用性を兼ね備えたフォントなので、デザインで指定された際には、ぜひこの方法を活用してみてください。