Flutter - how add custom font for svg image? #680

Activity

1. dnfield commented on Mar 13, 2022

   

   dnfield

   on Mar 13, 2022

   Owner

   More actions

   I'd find it helpful if you shared a small but complete example of the issue.

   Some places where this could possibly go wrong:

   • The font isn't getting included in the pubspec correctly (see https://docs.flutter.dev/cookbook/design/fonts).
   • The font is getting included as a plain asset and you need to use font loading API to load it (https://api.flutter.dev/flutter/dart-ui/loadFontFromList.html).
   • For some reason the SVG is getting parsed and rendered to a picture before the font is loaded.
   • The SVG is not specifying the correct font family information to resolve to your custom font.
   • The flutter_svg package is not making the right use of font rendering attributes to get the custom font to be used.

   Obviously if it's that last point, there's a bug in this package. A reproduction case would be able to narrow this down.
2. L4hibYoussef commented on Mar 15, 2023

   

   L4hibYoussef

   on Mar 15, 2023

   More actions

   Is there any updates on this. I am appearing to have the same issue. Font is loaded before image is rendered and font is available for use in the app. I am building the app for web using canvaskit.
3. devalev commented on Jul 12, 2023

   

   devalev

   on Jul 12, 2023

   More actions

   Is there any updates on this. I am appearing to have the same issue. Font is loaded before image is rendered and font is available for use in the app. I am building the app for web using canvaskit.

   You need to load the font when executing the application.

   void main() async {
     runApp(const MyApp());
   }
   
   void loadFont() async {
     var fontLoader = FontLoader("FontName");
     fontLoader.addFont(rootBundle.load('fonts/FontName.ttf'));
     await fontLoader.load();
   }
   
   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       loadFont();
       return Container();
     }
   }
   

   Please note that sometimes the font-family is specified in extra quotes in the svg file

   font-family="FontName"
   

   and

   font-family="'FontName'"
   

   these are different things, and, accordingly, you need to import different fonts

   var fontLoader = FontLoader("FontName");
   
   var fontLoader = FontLoader("'FontName'");