Issue
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.
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?
Solution
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)