Flutter custom fonts not loading

user_10338217 0
Viewed 11113

SOLVED: I'm still not sure what the problem was, but I fixed it by simply creating a new Flutter project, getting the fonts set up in the new project, and then just pasting my .dart files into the new project. Even though everything was exactly the same (as far as I can tell) it worked fine. Go figure.

I'm trying to use custom fonts in my app without success.

This is the fonts section of my pubspec.yaml file:

fonts:
  - family: Muli
    fonts:
      - asset:  fonts/Muli-Light.ttf

  - family: LibreBaskerville
    fonts:
      - asset:  fonts/LibreBaskerville-Regular.ttf

And in my app:

Widget _sectionTitle(String text) {
  return Container( 
  padding: EdgeInsets.fromLTRB(25.0, 0.0, 25.0, 5.0),
  child: Text(text,          
  style: new TextStyle(fontFamily: 'Muli', fontSize: 50.0),
  ));
  }
Widget _sectionText(String text){
    return Container (
    padding: EdgeInsets.fromLTRB(25.0, 0.0, 25.0, 15.0),
    child: Text(text, style: TextStyle(fontFamily: 'LibreBaskerville', fontSize: 20.0)),
    );
 }

Among the things I've tried (multiple times):

  • Deleting the installed file from the emulator
  • running from Android Studio vs running from VSCode
  • moving the .ttf files to different folders
  • downloading other fonts
  • using an online YAML validator
  • flutter clean

I'm assuming there's something amiss with the pubspec.yaml file, but I can't see what it might be.

Any suggestions would be much appreciated. Thx.

EDIT: Just tried creating a new default Flutter app with the same Pubspec.yaml font info. I added the custom font to the MaterialApp widget and it works ... so maybe the problem is not the yaml.

flutter
8 Answers

remove the app from the test device then do flutter clean, re-run 

flutter clean
user_55944650

If you are using vs code, you can run the following command at the terminal: flutter run --enable-software-rendering. That should solve the issue.

user_109748040

These are the steps you need to follow while you add custom fonts to your app.

Step-1: Place your fonts file (Abc.ttf) in assets folder (if you don't have one you may have to create it by yourself)

Step-2: Open your pubspec.yaml file and add this (Keep track of spaces) 

  fonts:
   - family: MyFont
     fonts:
       - asset: assets/Abc.ttf

Step-3: Run flutter packages get in terminal (Or use Packages get option in the IDE)

Step-4: Use your custom font in your code like this 

Text("Example", style:TextStyle(fontFamily: "MyFont"))
user_66186220

I know this quite old, but just in case someone comes across this:

I had a similar issue where asset images would not load in one project while it loaded another without issues in another project, everything appparently configured the same way.

The problem was that the one where it did not work properly was a flutter package project. Here you explicitly need to specify the packagename for asset images and also asset fonts.

Check my detailed answert here: https://stackoverflow.com/a/67526610/8539278

user_85392780

I came across the same issue, and I found my answer to it. It seems like ios folder and android folder is required to use font for somehow. I don't know why it is needed but that's the only difference between the one 'font works' and 'doesn't'.

Currently, I am focusing on WEB only so I deleted ios folder and android folder. I think, from now on, I keep those folder as a talisman.

user_122966540

You may run into this problem when using VS Code. If so create a new project and copy the files over. How to create a new project on VS Code? You create a new folder, open the new folder on VS Code and run on terminal 'Flutter create .' Then just transfer your files to the new directory. This worked for me for some reason

user_120039380

i removed menu -> run ->edit configuration -> main.dart -> additional run args -> --web-renderer html

user_43915180

Try to reinstall the apk in emulator

user_29758060
Related