Repository navigation
[flutter_svg] Does not support fallback font-famillies #187087
Description
Steps to reproduce
Following the resolution of #158691. I tried to create a minimal example of including a custom font with flutter_svg.
- download Google Font's ComicRelief-Bold font to fonts/ComicRelief-Bold.ttf
- add the font as asset to pubspec.yaml
- create a widget as an expanded SvgPicture with a minimal svg in a constant string, that declares a font-familly with a fallback.
- Load the font with a FontLoader in the Build function of the app.
- I am running with
flutter run -d windows
The exact code will be provided in the relevant section.
Expected results
Expected the text to be displayed as the unmistakable Comic Relief font:
Actual results
Get the default font instead:
Code sample
main.dart
import 'package:flutter/services.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
void main() {
runApp(const MainApp());
}
const svg_string = '''<?xml version="1.0" encoding="utf-8"?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16.105376344086 5.03333333333333" version="1.1" style="font-synthesis: none;" xmlns="http://www.w3.org/2000/svg">
<text x="0" y="0" transform="matrix(0.0333333333333333,0,0,0.0333333333333333,0.96505376344086,3.25134408602151)" stroke="none" fill="#800080" fill-opacity="1" font-size="26.8817204301075" font-family="ComicRelief-Bold, sans-serif" font-weight="bold" font-style="normal">ComicRelief-Bold</text>
</svg>''';
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
loadFont();
return Expanded(child: SvgPicture.string(svg_string));
}
void loadFont() async {
var fontLoader = FontLoader("ComicRelief-Bold");
fontLoader.addFont(rootBundle.load('fonts/ComicRelief-Bold.ttf'));
await fontLoader.load();
}
}(part of) pubspec.yaml
flutter:
uses-material-design: true
fonts:
- family: ComicRelief-Bold
fonts:
- asset: fonts\ComicRelief-Bold.ttfScreenshots or Video
Screenshots / Video demonstration
[Upload media here]
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
[√] Flutter (Channel stable, 3.44.0, on Microsoft Windows [Version 10.0.26100.8390], locale en-CH) [528ms]
• Flutter version 3.44.0 on channel stable at C:\Users\CHLYGOE\Tools\Flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 559ffa3f75 (11 days ago), 2026-05-15 14:13:13 -0700
• Engine revision 4c525dac5e
• Dart version 3.12.0
• DevTools version 2.57.0
• Feature flags: enable-web, enable-linux-desktop, enable-macos-desktop, enable-windows-desktop, enable-android, enable-ios, cli-animations, enable-native-assets,
enable-swift-package-manager, omit-legacy-version-file, enable-lldb-debugging, enable-uiscene-migration
[√] Windows Version (11 Enterprise 64-bit, 24H2, 2009) [1,825ms]
[X] Android toolchain - develop for Android devices [172ms]
X 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/to/windows-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.
[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe) [145ms]
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[√] Visual Studio - develop Windows apps (Visual Studio Professional 2026 18.6.1) [144ms]
• Visual Studio at C:\Program Files\Microsoft Visual Studio\18\Professional
• Visual Studio Professional 2026 version 18.6.11819.183
• Windows 10 SDK version 10.0.26100.0
[√] Connected device (2 available) [189ms]
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.26100.8390]
• Edge (web) • edge • web-javascript • Microsoft Edge 147.0.3912.98
[√] Network resources [835ms]
• All expected network resources are available.
Activity
LyGoeAbb commentedon May 26, 2026
After reviewing the issue in more detail, it seems that the issue with my code is that the base SVG I use sets the font this way:
font-family="ComicRelief-Bold, sans-serif". and this is not recognised properly.[-][flutter_svg] Cannot add custom font for svg image.[/-][+][flutter_svg] Does not support fallback font-famillies[/+]LyGoeAbb commentedon May 26, 2026
I changed the title of the issue because adding custom fonts works, but it is the support for font fallbacks that is missing. Or more exactly, the fact that the library does not recognise that the font-familly is actually a list of fonts, means that it will not even try with the first element of the list.
A satisfactory improvement would be to only parse the first element in the list of fonts. I don't think this can be done at the level of the vector_graphics_compiler without breaking changes. I'm searching where in flutter_svg the changes should be made
LyGoeAbb commentedon May 26, 2026
I found a possible place to improve.
In the broader Flutter, font-family fallbacks are supported through the TextStyle.fontFamilyFallback property.
In vector_graphics/lib/src/listener.dart, in the function onTextConfig at line 740:
The listener builds a paragraph and defines the TextStyle. This is probably the place where to split the TextConfig.fontFamily into the primary fontFamily, and a list of fontFamilyFallbacks
As far as I know this is the only place where a TextStyle is created, so this is the prime place to introduce the change. It should not be breaking changes as it impacts only what is already broken.
Maybe fontFamilyFallbacks could be supported by the vector_graphics_compiler but that would be breaking changes.
mbcorona commentedon May 26, 2026
Hi @LyGoeAbb , thanks for the report, code sample, evidence and fidings, and findings. I'm routing to the engine team to evaluate the issue.
mackings commentedon Nov 4, 2026
Hi, I'd like to pick this up. I reproduced it on main, a list like
"Roboto, sans-serif"renders exactly like a font that doesn't exist. Your pointer toonTextConfigwas spot on. I'll split the list there and pass the rest asfontFamilyFallback, so nothing changes in the compiler.[vector_graphics] Use font-family lists as a family with fallbacks (f…