CODEWITHSUNDEEP
flutter
LeeHunter
LeeHunter

Reputation: 71

Flutter custom fonts not loading

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):

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.

Upvotes: 6

Views: 15171

Answers (8)

Azade Rahmati
Azade Rahmati

Reputation: 207

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

Upvotes: 0

Kipruto
Kipruto

Reputation: 857

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

Upvotes: 0

tmaihoff
tmaihoff

Reputation: 3550

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

Upvotes: 1

Mohanad Obaid
Mohanad Obaid

Reputation: 351

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

flutter clean

Upvotes: 12

k n
k n

Reputation: 26

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.

Upvotes: 0

zain
zain

Reputation: 35

Try to reinstall the apk in emulator

Upvotes: -6

Ismailawa
Ismailawa

Reputation: 49

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.

Upvotes: 4

CopsOnRoad
CopsOnRoad

Reputation: 267404

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"))

Upvotes: 1

Related Questions