CODEWITHSUNDEEP
flutterdartfontsflutter-font
OhMad
OhMad

Reputation: 7289

Flutter - Custom Font not displaying

This is an excerpt of my pubspec.yaml file:

flutter:
  uses-material-design: true
  fonts:
   - family: Coiny
     fonts:
       - asset: fonts/Coiny-Regular.ttf

I am trying to use the font called "Coiny" from the Google Fonts page. I created a fonts folder inside my root directory and put it in there.

In my code, I do this:

new Text("Testtext", style: new TextStyle(fontFamily: "Coiny")),

But it has no effect. I have encountered a similar problem in the past with the Barrio font. But it seemed to work after some time, which is not the case with this one.

Upvotes: 58

Views: 51666

Answers (18)

Tanmay Bhatgare
Tanmay Bhatgare

Reputation: 41

if you're running flutter on chrome rather than emulator, you have to restart the project and your font will be displayed. No need to change any setting in pubspec.yaml.

Upvotes: 1

Tom
Tom

Reputation: 3421

I followed the suggestions here, and was still stuck. (flutter clean, restarting the emulator, rebooting etc)

The two things that finally got me working were

  1. The font family name in the pubspec.yaml has to match the one in the ttf file attributes: enter image description here

This seems to have to match case exactly like so:

flutter:
  fonts:
    - family: MusiQwik
      fonts:
        - asset: fonts/Musiqwik-zRl1.ttf
  1. If the font is provided by a package, then you have to qualify which package (even if you are using the font in the same package as where it is referenced in pubspec.yaml)... so
          Text(
            'some test here',
            style: TextStyle(
              fontFamily: 'MusiQwik',
              package: 'music_stuff',    // <--- had to add this
              fontSize: 66.0,
              color: Colors.black,
              fontWeight: FontWeight.normal
            ),
          ),

Upvotes: 3

EyoGroup
EyoGroup

Reputation: 19

maybe your fonts folder assets is inside lib folder try to put your assets folder outside, i had some probleme before

Upvotes: 1

AllwiN
AllwiN

Reputation: 813

I also encountered this issue, after setting the font B, it not showing correctly. But the issue for me was I made an empty line between two font-family, like below

  fonts:
    - family: A
      fonts:
        - asset: assets/fonts/A-Regular.ttf

    - family: B
      fonts:
        - asset: assets/fonts/B-Regular.ttf

remove the empty line between two font families, This was the working solution for me and remember YAML is INDENTATION sensitive

Upvotes: 3

ibrahim
ibrahim

Reputation: 653

In my case the font asset files were corrupted. Try installing them on your local machine first. If it gives you an error then they are corrupted.

Upvotes: 2

DC007744
DC007744

Reputation: 133

1. Check the indentation. Every sub-property has 2 spaces from the left. Don't use tab spaces.

2. Stop the dart file execution and try to cold boot the emulator.

3. Try doing a hot restart.

Refer to this YouTube Tutorial.

Upvotes: 2

Ribaz
Ribaz

Reputation: 676

I had font: not right under flutter:. I moved the font: section right under flutter: , and worked.

flutter:

  fonts:
    - family: Test
      fonts:
      - asset: assets/fonts/Font-Test.ttf

Upvotes: 38

bmonsalvatge
bmonsalvatge

Reputation: 111

I had the same issue. If you're testing via an emulator, you just need to stop and restart it. Via VSCode you can just stop the run process (Red square in the top right) and then run -> Run without debugging or Start Debugging

Upvotes: 10

Sludge
Sludge

Reputation: 7395

I had an issue with the font and was receiving these two warnings:

Warning: No fonts specified for font [font family name]
Warning: Missing family name for font.

The issue was that I had the pubspec.yaml fonts section typed incorrectly.

Make sure your pubspec.yaml looks like this:

flutter:

  fonts:
    - family: FontFamily
      fonts:
      - asset: fonts/Font-Medium.ttf

  uses-material-design: true

You will then need to flutter clean and then flutter pub get. If all of this fails, try to uninstall the app and then reinstall it again (as Collin states above) after doing the above.

I had a "-" next to the nested fonts declaration, which was causing those errors (and the font not to work).

Upvotes: 4

user14228909
user14228909

Reputation:

set in pubspec.yaml

 fonts:
  - family: Montserrat
    fonts:
      - asset: assets/fonts/Montserrat-Regular.ttf
      - asset: assets/fonts/Montserrat-Bold.ttf


    and then make sure that clean and build

Upvotes: 0

Anchit Gangrade
Anchit Gangrade

Reputation: 179

You have add new files in the app therefore you have to close the running device and then restart the emulator.

-stop a running emulator -run a emulator

It works in my case.

Upvotes: 4

Ganesh Garad
Ganesh Garad

Reputation: 391

Just Uninstall previous flutter app apk from your android device and again run application. This will resolve your problem. If this not working then clear device cache and try again.

Upvotes: 4

Michael Peterson
Michael Peterson

Reputation: 10532

Idek, sometimes I've found you need to totally kill your simulator or device and re-install to get some fonts to work. I've also found that some font just refuse to work. Try a different font to to confirm your sanity that your pubspec and TextThemes are actually correct with known working font.

Upvotes: 1

DenisKolodin
DenisKolodin

Reputation: 15081

I had the other reason. Consider removing spaces from family name. For example, use "MavenPro" instead of "Maven Pro".

Also check you put fonts section into flutter section.

Upvotes: 1

CopsOnRoad
CopsOnRoad

Reputation: 267554

Whenever you make changes to pubspec.yaml file, it is always a good idea to stop the ongoing dart process from your IDE and do a full restart.

If you do hot reload or hot restart, engine may not be able to fetch the newly added data to your file. If nothing works, you should use @Collin answer, uninstall and reinstall the app.

Upvotes: 7

Subhash P
Subhash P

Reputation: 43

I tried everything but the changes in pubspec.yaml just did not make any difference. I then created a new project. copied font files to respective folder, made all changes to pubspec.yaml, pasted code into my main.dart file. I ensured everything was in place and then ran project in simulator and viola all fonts appeared in full glory.

Upvotes: 1

Sunil
Sunil

Reputation: 3494

Font declaration alignment is not as per flutter pubspec.yaml. It should be like below.

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

You can check out it here.

Upvotes: 5

Collin Jackson
Collin Jackson

Reputation: 116728

You might want to try removing the app from the device and reinstalling it. Depending on how you're launching, it might not be writing over the old install file.

Upvotes: 113

Related Questions