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.

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

Solution 2

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

Solution 3

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.

Solution 4

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

Solution 5

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.

View more solutions

Comments

[OhMad]

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

[AouledIssa]

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

[Isuru Bandara]

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

[Ulysses Alves]

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.