【Flutter】Androidでフォントが中華フォントになってしまう問題の原因と解決方法

2025年1月7日 2025年1月7日

Androidアプリのテキストの漢字のフォントがおかしい場合の対処法

Androidだけテキストフォントが中国語の漢字っぽくなってしまうのを直す方法

ヒーラー

Flutterで作成したアプリのテキストフォントがAndroidだけおかしな漢字になってしまう。中国語系のフォントがデフォルトになってしまっている？

はじめに

FlutterにおいてiOS/Androidアプリを開発しています。

基本的にiOSのシミュレーターを使って動作検証しながら開発を進めているために気付きませんでしたが、いざAndroidの実機で動作検証してみたところ違和感を感じました。

それは、Androidアプリ中に使用しているテキストのフォントがどうもおかしいということです。
文章によってはなかなか気付きにくいのですが、一部の漢字を使った場合に普通の日本語のフォントとは違うようだということに気付きます。

問題点

最初に違和感を感じたのが、以下のスクリーンショットにある「級」という字です。

初級、中級、上級という単語で使用していますが、よく見ると「級」の糸へんの下の縦棒部分が、点になっていることがわかります。
習字で行書体を書くときのような形です。

iOSではこのような表示にはならず、問題なく縦棒になっています。

原因

現在、Androidのシステムフォントは、Googleによって開発された「Roboto」か「Noto Sans CJK」です。

Flutterに限らず、Androidアプリの開発においてフォントファミリーを指定しなかった場合は、Androidの端末によってどちらかのフォントがデフォルトフォントとして適用されます。

なお、手元にあるAndroid端末は「Google Pixel 6a」です。
どうやらデフォルトフォントは「Noto Sans CJK」になっているようです。

さて、ではどうしてこのような中国語の漢字のようなフォントになっているのでしょうか。

それは「Noto Sans CJK」というフォントの特性にあります。

この「Noto Sans CJK」の「CJK」は、中国語、日本語、韓国語の意味があり、それぞれのフォントセットが含まれています。

Flutter開発において、フォントファミリーについて何も指定しないでいると、デフォルトフォントとして「Noto Sans CJK」の中国語が適用されているようです。

Google Fontsのサイトで確認してみるとわかります。

https://fonts.google.com/noto/specimen/Noto+Sans+SC

少し変な文章ですが、一部の漢字に違和感があることがわかります。

これが同じ「Noto Sans CJK」フォントでも日本語が適用されれば、見慣れた正しいフォントになります。

https://fonts.google.com/noto/specimen/Noto+Sans+JP

対処方法

適用したいフォントがあるのであれば、フォントファイルを用意して、フォントファミリーとして適用すればよくなります。
しかし、特にフォントの指定はなく、デフォルトフォントが「Noto Sans CJK」であるなら、フォントファミリー自体を変更しなくとも日本語を適用してくれさえすれば解決しそうです。

そのためには、ロケールを日本に設定することです。

pubspec.yaml に以下の指定を追記して flutter_localizations を追加をします。

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations: 
    sdk: flutter

そして、main.dart に以下コードを追加します。

import 'package:flutter_localizations/flutter_localizations.dart';

// 省略

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale("ja", "JP"),
      ],
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

対応後、Androidでビルド、実行したところ、フォントが馴染みのある形に直りました。