はじめに
ウェブサイトを制作していると、デザインで游ゴシック体（Yu Gothic）が指定されていることはよくあります。しかし、WebflowではGoogleフォントが標準で用意されている一方、游ゴシックは含まれていません。
そのため、Webflowで游ゴシックを使いたい場合は、以下のいずれかの方法で対応する必要があります。
- Adobe Fontsを使う
- フォントファイルをアップロードする
- CSSで
font-familyを直接記述する
本記事では、CSSで游ゴシックをFont Familyとして指定する方法を紹介します。
游ゴシックとは？
游ゴシック体は、長文でも読みやすいよう設計された日本語フォントです。文字の横幅がやや狭く、行間にゆとりがあるため、可読性が高いのが特徴です。本文やキャプション、見出しなど幅広い用途で使える定番フォントとして、多くのデザインに採用されています。
特にWindowsユーザーにとっては馴染みのあるフォントで、システムに標準でインストールされていることが多いです。
Font Familyとは？
font-familyは、CSSでフォントを指定するプロパティです。WebflowでGoogleフォントを設定した場合でも、実際にはこのfont-familyプロパティによってブラウザにフォントが指定されています。
Webflowで游ゴシックを使うには？
游ゴシックを使いたい場合、font-familyをCSSで指定する必要があります。Webflowでは「プロジェクト設定」からカスタムコードを使って、全ページに適用することが可能です。
設定手順
- Webflowのプロジェクト設定（Project Settings）にアクセス
- [Custom Code]タブを開く
<head>内のカスタムコード欄に以下を記述
<style>
body {
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}
</style>
このように記述することで、游ゴシック体がユーザーの端末にインストールされていれば表示され、なければ順にフォールバックフォント（YuGothic → Yu Gothic → sans-serif）へと置き換えられます。
✅ ポイント：游ゴシックはシステムフォントのため、ユーザーの環境に存在しない可能性もあります。そのため、フォールバックフォントを必ず指定することが重要です。
特定の要素にだけ適用したい場合
全体ではなく、特定の要素だけに游ゴシックを使用したい場合は、クラスやタグを指定して個別にスタイルを当てましょう。
<style>
.yu-gothic {
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}
</style>
まとめ
Webflowで游ゴシック体を使うには、カスタムコードでfont-familyを指定するだけ。Adobe FontsやGoogle Fontsにない日本語フォントも、この方法なら簡単に適用できます。
游ゴシックは読みやすさと汎用性を兼ね備えたフォントなので、デザインで指定された際には、ぜひこの方法を活用してみてください。
.svg)
