Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Custom fonts (including MaterialIcons-Regular.ttf) don't seem to work in WebKit powered browsers. Text in my flutter app renders in what looks like Times New Roman in Safari on macOS and Safari as well as Chrome on iOS, but in Roboto Mono and Roboto Slab as intended in Chrome, Chromium Edge and Firefox on macOS. Screenshots of the same flutter app built for the web and tested on different platforms (both emulated and not) here. Platform and browser info in the info section of each screenshot.
I've ran into this issue as well. The weird things are:
CSS is actually assigned correctly:
And it's not reproducible everytime. Sometimes It renders correctly on first page open (but never on page refresh). Sometimes opening developer console and scrolling the page – see "Developer? Designer?..." text in my screenshot – helps to fix the fonts dynamically (re-rendering triggered?).
So I'm not sure if it's not some bug in Safari engine itself.
In iOS all the browsers use Safari engine internally, so I believe this is the issue with Safari only.
Yes, I have noticed that as well, the issue has been consistent for me though. I've never had it render fonts properly in Safari.
That was my original assumption as well:
Still not working with the latest master version:
I believe that root cause is not connected to invalid family name. See my comments #41483 (comment) and #41483 (comment) – first, CSS is assigned correctly; second, if you include font directly into html via link to Google font and just use font-family name without any weird characters in it, it still won't work.
I tested two custom fonts RobotoMono and ZCOOLXiaoWei on Safari on MacOs. Safari version is:Version 13.0.2. I also tested Chrome on MacOs and Firefox on MacOs.
Including Safari, text seems identical to how it should.
@hterkelsen pointed out the issue might be with the directory of the assets.
The assets should be in a directory under the root directory instead of under web. Looks like this:
FontManifest.json wil be filled automatically when you run "flutter build web"
You can follow the cookbook link: https://flutter.dev/docs/cookbook/design/fonts