webflowは英語が基本となるため、デフォルトでは日本語フォントパターンが少ないです。そこでwebflowへフォント追加の方法をいくつかご紹介します。
webflowに追加できるフォントの一つに、「Googleフォント」があります。以下の手順で設定することが出来ます。
上記画面からGoogleフォントを選択します。ただし、この文字列を見てもどういったフォントか分かりづらいと思います。
Google Fontsサイトから、Language（言語）で日本語選択（Japanese選択）をし、日本語フォントの見栄えを確認します。
入れたいフォント名を確認した後に、webflow設定に戻り選択します。フォントが追加されたことを確認し、実際にフォントを使用してみます。
試しにReggae Oneというフォントを使用してみます。フォント選択から新しく追加されていることを確認し、選択するだけで適用されます。
webflowに追加できるフォントの一つに、「Adobeフォント」があります。Adobeフォントは有料と無料のフォントがあります。どちらも設定方法は同じです。以下の手順で設定することが出来ます。
Adobe Fontからログイン後、右上のアカウントアイコンを選択し、APIトークンのページを開きます。「新しいAPIトークンを作成」をクリックし、APIトークンを作成します。
webflowのAdobeフォント欄に貼り付けます。Adobeフォント欄はGoogleフォント設定より下にスクロールした箇所にあります。
無料で使う場合、「Show fonts available with Creative Cloud」のチェックを外します。また、言語設定を日本語にします。</>マークのフォントが利用可能です。使いたいフォントの</>マークをクリックします。
WEBプロジェクト名を入力しフォントを追加します。なお、「これらのフォントをWeb ページで使用するには、このコードをHTMLの <head> タグ内にコピーします。」と出てきますが無視して下さい。
webflow画面のAdobe Fonts画面に戻ります。追加したプロジェクトファイルが表示されているので、選択して保存します。（保存は右上のSave Changesボタンを押下）
webflowサイト制作画面で追加したフォントを選択します。フォントが対応されているのが分かりますね！
webflowへのフォント追加設定を紹介しました。これら以外にカスタムフォント設定もあるのですが、設定が少し面倒のため割愛しました。Googleフォント設定は、フォントを選択するだけのためフォント追加まで1分足らずで可能です。Adobeフォント設定は、APIトークンの作成が少し手間があるかもしれませんが、それでも3分程度で可能です。フォントはWEBサイトの雰囲気やデザイン性においてとても重要な要素のため、是非ともお試しください。
05.png)
10.png)
007.png)
06.png)
.png)
2.png)
1.png)