Flutter web app Japanese Character(Non English Character) doesn't work


I am going to write flutter web in vs code.
Before creating a flutter app, I already feed following commands.

flutter channel beta

flutter upgrade

flutter config --enable-web

After that I create a flutter web app via

vsCode > Shift+Command+P > Flutter:New Application Project

I added some Japanese and Arab text in generated sample code after creating a new flutter web app.
Japanese Text are not shown when I running with Shift+F5 or F5.

enter image description here

Japanese and Arab Text are displayed if I run from terminal with following command.

flutter run -d chrome

But this doesn’t work hot reload if I don’t press ‘r’ or ‘R’ in terminal again.

Is there anyone who is facing that problem and have solution for this?


When launching Flutter project by pressing F5, dartdevc compiler is used, but command flutter run -d chrome uses dart2js compiler.

dartdevc renders text on canvas HTML-element (with CanvasKit) and uses system fonts.

dart2js renders text as paragraph HTML-element, and therefore uses fonts from browser.

As a workaround, you can use a custom font, for example Noto Sans JP.

There is related issue.

Answered By – Spatz

Answer Checked By – Mary Flores (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *