技術記事

micomia株式会社の畑井です。
今回はFlutterFlowでアプリを開発する際に日本語がおかしく表示されてしまうことについて適切なフォントなどを紹介しながらフォントの種類の変え方を解説していきます。

1.フォントの変更方法

Thema SettingsのTypography & Iconsというところでフォントの設定を行うことができます。
画面右上のPrimary Font FamilyとSecondary Font Familyというところを押すことでフォントの種類を変えることができます。

押してみるとこのように表示され、さまざまなフォントが表示されますが、基本的には「JP」と検索すると出てくる「Note Sans JP」と「IBM Plex Sans JP」の2つが日本語の特に漢字を日本人が読みやすい形で表示してくれます。

ここまではFlutterFlow内で用意されているフォントから選びましたが、隣にあるCustom Fontsを登録する方法を次にお伝えします。

2.Custom Fontsを利用

Custom FontsはGoogle Fontsからダウンロードしたフォントを読み込ませてFlutterFlowで用意されているフォント以外のフォントを利用できる機能です。
フォントをダウンロードするためにGoogle Fontsに移動してください。

https://fonts.google.com/

明朝体のフォントがFlutterFlow内で見当たらなかったのでZen Old Minchoというフォントをダウンロードしてみます。
「Get font」から次のページに進み、「Download all」をクリックしてください。
Zipファイルをダウンロードできたと思いますので、そのファイルを解凍してFlutterFlowに戻ります。

Custom Fontsの画面で「Add font」をクリックします。

ダウンロードしたフォルダを選択し、選択できないファイル以外すべて選択し、開くを押してください。

このように読み込まれたフォントが表示されますので登録する名前を入力し、「Add Font」を押していただければフォントの登録が完了します。

3.さいごに

このようにすることでFlutterFlow内で用意されているフォントを変更したり、自分で利用したいフォントをダウンロードしてきてセットすることが可能です。
フォントのよっては日本語の表示に対応していなかったり、適切に表示されないものもありますのでご確認の上、ご利用いただければと思います。