fontFamilyFallback isn't working in Flutter web. I've tried many things but nothing worked. It's very easy to reproduce.
Steps to Reproduce
- Run the code sample 1, in debug mode in Chrome.
- Run the code sample 2, in debug mode in Chrome.
The only difference between code sample 1 and code sample 2 is the fontFamily. In code sample 1 it is set as "Helvetica". In code sample 2 it is set as "Some font that doestn exist".
Expected results:
Expected result for code sample 1:
Text should be rendered with fontFamily (Helvetica).
Expected result for code sample 2:
Text should be rendered with fontFamilyFallback (Palatino), as the fontFamily is not available.
Actual results:
In code sample 1, the resulted is correct, as expected. The font rendered is Helvetica, the fontFamily specified.
However, in code sample 2, the result is wrong. The font rendered is the system default (SF Pro), but it should be the first font in fontFamilyFallback (which is Palatino). Instead, Flutter just ignores fontFamilyFallback.
Note that the problem is not Palatino. If I set fontFamily as Palatino, it does work (this is how I made the image for "expected result for code sample 2").
Code samples
Code sample 1:
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(
home: Home(),
));
}
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Column(
children: const [
Text(
"abcdefghijklmnopqrstuvwxyz\n- + 0123456789",
style: TextStyle(
fontFamily: 'Helvetica',
fontFamilyFallback: [
"Palatino",
],
),
)
],
);
}
}
Code sample 2:
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(
home: Home(),
));
}
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Column(
children: const [
Text(
"abcdefghijklmnopqrstuvwxyz\n- + 0123456789",
style: TextStyle(
fontFamily: 'Some font that doestn exist',
fontFamilyFallback: [
"Palatino",
],
),
)
],
);
}
}
Logs
flutter analyze
No issues found! (ran in 1.4s)
flutter doctor -v
[✓] Flutter (Channel stable, 3.0.4, on macOS 12.4 21F79 darwin-arm, locale pt-BR)
• Flutter version 3.0.4 at /Users/rafaelguimaraes/development/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 85684f9300 (6 weeks ago), 2022-06-30 13:22:47 -0700
• Engine revision 6ba2af10bb
• Dart version 2.17.5
• DevTools version 2.12.2
[✗] Android toolchain - develop for Android devices
✗ Unable to locate Android SDK.
Install Android Studio from: https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK components.
(or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
If the Android SDK has been installed to a custom location, please use
`flutter config --android-sdk` to update to that location.
[!] Xcode - develop for iOS and macOS (Xcode 13.4.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
✗ CocoaPods not installed.
CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[!] Android Studio (not installed)
• Android Studio not found; download from https://developer.android.com/studio/index.html
(or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
[✓] VS Code (version 1.70.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.46.0
[✓] Connected device (2 available)
• macOS (desktop) • macos • darwin-arm64 • macOS 12.4 21F79 darwin-arm
• Chrome (web) • chrome • web-javascript • Google Chrome 104.0.5112.79
[!] HTTP Host Availability
✗ HTTP host "https://cocoapods.org/" is not reachable. Reason: An error occurred while checking the HTTP host: Failed host lookup: 'cocoapods.org'
✗ HTTP host "https://maven.google.com/" is not reachable. Reason: An error occurred while checking the HTTP host: Failed host lookup: 'maven.google.com'
✗ HTTP host "https://pub.dev/" is not reachable. Reason: An error occurred while checking the HTTP host: Failed host lookup: 'pub.dev'
✗ HTTP host "https://cloud.google.com/" is not reachable. Reason: An error occurred while checking the HTTP host: Failed host lookup: 'cloud.google.com'
! Doctor found issues in 4 categories.
Thank you!


