Flutter - Custom Font not displaying

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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.

Answer 8

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.

Answer 9

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

Answer 10

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.

Answer 11

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

Answer 12

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.

Answer 13

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.

Answer 14

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.

Answer 15

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.

Answer 16

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.

Answer 17

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:

This seems to have to match case exactly like so:

flutter:
  fonts:
    - family: MusiQwik
      fonts:
        - asset: fonts/Musiqwik-zRl1.ttf

2. 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
            ),
          ),