ウェブサイトを制作している際、渡されたデザインのフォントが游ゴシックであることは多いと思います。WebflowではGoogleフォントの使用が標準で用意されていますが、游ゴシックは含まれていません。残された手段はAdobe Fonts、フォントファイルをアップロード、Font Familyを記述して使用する方法です。今回の記事では游ゴシックをFont FamilyのCSSを記述して使用する方法を紹介します。
游ゴシックとは
游ゴシック体は長い文章でも読みやすいゴシック体です。字面を小さめに設計し文字間にゆとりがあり、小さいサイズでも文字同士が干渉せず、識別性に優れた読みやすいフォントになります。使用用途は幅広く、キャプション・本文・見出しまで幅広い用途に対応します。
Window歴が長い方は游ゴシック体は馴染み深いと思います。
一言で言うと定番のフォントです。
Font Familyとは
font-familyはフォント指定するCSSプロパティです。ウェブサイトを作成している際のフォント指定は基本的にfont-familyで行われます。
WebflowでGoogleフォントから選択したフォントも、検証ツールで見るとfont-familyで指定されています。
Webflowで游ゴシックを使用する方法
font-familyを記述するためにはコードを書く必要があります。基本的に全てのページのフォントで使用することになるので、Headタグ内にコードを設置します。
Project Settingsから、Custom Codeを選択し、Head Codeのテキストエリアに以下のコードを貼り付けます。
bodyに対してfont-familyを当てているので、全ページの要素に対して適応されます。
もしも一定の箇所にもに当てたい場合は、クラスで指定しましょう
まとめ
Webflowで游ゴシックを使うためには、
カスタムコードでFont_familyを記述
たったこれだけで、GoogleフォントやAdobeフォントにないフォントを指定することが出来ます。
みなさんもWebflowでの制作のなかで游ゴシック体を指定することがあると思いますので、ぜひ試してみてください！
