Kevin's Blog

Flutter is a popular cross-platform development framework. However, its CJK support looks not so good, CJK characters cannot display correctly in some platforms (e.g. Linux). This article is to explain how to solve the CJK display problem.

Preparation

Before all, you need following things:

• Flutter
• Your Flutter project
• Fonts you need. You need topay more attention to fonts' copyright!

Following article I will take YouYuan.TTC as sample.

Process

After preparing, we start to fix the problem.

Fist of all, we need to create a folder under your project to storage font files. I use fonts as sample.

Then, copy your font files into the folder. Command may like:

cp $fontPath/YouYuan.TTC $flutterProj/fonts

After that, we need to edit pubspec.yaml. You may find following comments:

# example:
# fonts:
#   - family: Schyler
#     fonts:
#       - asset: fonts/Schyler-Regular.ttf
#       - asset: fonts/Schyler-Italic.ttf
#         style: italic
#   - family: Trajan Pro
#     fonts:
#       - asset: fonts/TrajanPro.ttf
#       - asset: fonts/TrajanPro_Bold.ttf
#         weight: 700
#

According the content, it's easy to get that this file is for customizing font configuration.

I modified like this, you can have your different one 😀

fonts:
    - family: YouYuanFont
      fonts:
        - asset: fonts/YouYuan.TTC
        # You could add more assets as you want
          weight: 700

The final step is that importing your fonts to use. Find the class which extends StatelessWidget and modify it like this:

class KApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        fontFamily: 'YouYuanFont', // This is what you enter in family in pubspec.yaml

After that, you may find that your project can display CJK correctly.