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.

if you prefer google fonts I think google_fonts package can easily help heres how stackoverflow.com/a/59223217/8253662 — Mahesh Jamdade
– Mahesh Jamdade, Commented Dec 7, 2019 at 5:16
I feel this is an issue the Flutter developers have to correct. Uninstalling is not an ideal way to develop — Harsha
– Harsha, Commented Mar 1, 2020 at 9:28

Collin Jackson · Accepted Answer · 2017-06-05 10:08:33Z

113

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.

answered Jun 5, 2017 at 10:08

Collin Jackson

117k31 gold badges229 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

OhMad Over a year ago

You're right. I was running it from a vm, and on my actual device it works.

Marek Halmo Over a year ago

Removing the app worked .. thank you alot!

Ribaz · Accepted Answer · 2020-09-19 06:39:13Z

40

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

answered Sep 19, 2020 at 6:39

Ribaz

6945 silver badges11 bronze badges

5 Comments

mik Over a year ago

yep. silly but worked.

Risqi Ardiansyah Over a year ago

Simple but really save my time, thank you

Dave Over a year ago

Incredible that this is the problem, worked for me thanks.

Dave Over a year ago

Like to add I thought this worked, but on release build, it failed. So I did a flutter clean and another build and everything was fine. So I doubt this is the real reason.

Godofsleepy Jul 17 at 7:37

thanks man, never though this is the issue

bmonsalvatge · Accepted Answer · 2020-09-11 03:17:09Z

10

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

answered Sep 11, 2020 at 3:17

bmonsalvatge

1111 silver badge6 bronze badges

Comments

CopsOnRoad · Accepted Answer · 2019-09-09 17:53:32Z

7

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.

answered Sep 9, 2019 at 17:53

CopsOnRoad

271k97 gold badges702 silver badges471 bronze badges

1 Comment

Isuru Bandara Over a year ago

It worked with your method :) I just remove the mobile from the cable and reinstall it.

Sunil · Accepted Answer · 2018-07-28 06:41:19Z

5

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.

answered Jul 28, 2018 at 6:41

Sunil

3,5243 gold badges23 silver badges22 bronze badges

1 Comment

AouledIssa Over a year ago

Extra un necessary font config, this Suffice for each font family:

fonts:     - family: Montserrat       fonts:         - asset: assets/fonts/Montserrat-Thin.ttf           weight: 100         - asset: assets/fonts/Montserrat-ExtraLight.ttf           weight: 200         - asset: assets/fonts/Montserrat-Light.ttf           weight: 300         - asset: assets/fonts/Montserrat-Regular.ttf           weight: 400         - asset: assets/fonts/Montserrat-Medium.ttf           weight: 500         - asset: assets/fonts/Montserrat-Bold.ttf           weight: 700

Ganesh Garad · Accepted Answer · 2020-04-05 04:23:04Z

4

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.

answered Apr 5, 2020 at 4:23

Ganesh Garad

3812 silver badges6 bronze badges

Comments

Anchit Gangrade · Accepted Answer · 2020-04-29 18:07:07Z

4

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.

answered Apr 29, 2020 at 18:07

Anchit Gangrade

1791 silver badge4 bronze badges

Comments

Sludge · Accepted Answer · 2020-09-06 17:03:29Z

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

answered Sep 6, 2020 at 17:03

Sludge

7,7346 gold badges36 silver badges46 bronze badges

1 Comment

Ulysses Alves Over a year ago

Perfect! Yaml sintax is very punitive. Thanksfully I saw those warnings and then found your answer here. I had the same problem of the unnecessary "-". Thank you.

Tom · Accepted Answer · 2024-01-06 05:04:05Z

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

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

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

AllwiN · Accepted Answer · 2021-09-15 08:27:38Z

3

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

edited Sep 15, 2021 at 8:27

answered Sep 15, 2021 at 8:18

AllwiN

8132 gold badges13 silver badges29 bronze badges

Comments

DC007744 · Accepted Answer · 2021-07-07 06:11:13Z

2

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.

edited Jul 7, 2021 at 6:11

answered Jul 5, 2021 at 6:40

DC007744

1338 bronze badges

Comments

ibrahim · Accepted Answer · 2021-07-24 08:18:23Z

2

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.

answered Jul 24, 2021 at 8:18

ibrahim

6531 gold badge7 silver badges21 bronze badges

Comments

Subhash P · Accepted Answer · 2018-11-24 11:18:39Z

1

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.

answered Nov 24, 2018 at 11:18

Subhash P

436 bronze badges

Comments

DenisKolodin · Accepted Answer · 2019-09-10 01:32:50Z

1

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.

answered Sep 10, 2019 at 1:32

DenisKolodin

15.4k3 gold badges70 silver badges68 bronze badges

Comments

Michael Peterson · Accepted Answer · 2020-02-22 06:09:39Z

1

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.

answered Feb 22, 2020 at 6:09

Michael Peterson

10.6k4 gold badges57 silver badges51 bronze badges

Comments

EyoGroup · Accepted Answer · 2023-07-10 13:03:33Z

1

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

edited Jul 10, 2023 at 13:03

answered Jul 9, 2023 at 1:58

EyoGroup

193 bronze badges

Comments

Tanmay Bhatgare · Accepted Answer · 2024-05-15 08:15:05Z

1

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.

answered May 15, 2024 at 8:15

Tanmay Bhatgare

412 bronze badges

Comments

user14228909 · Accepted Answer · 2020-09-06 06:42:04Z

0

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

answered Sep 6, 2020 at 6:42

user14228909

Collectives™ on Stack Overflow

Flutter - Custom Font not displaying

18 Answers 18

2 Comments

5 Comments

Comments

1 Comment

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

18 Answers 18

2 Comments

5 Comments

Comments

1 Comment

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related