How to add a custom font?

Question

I want to add a custom font to a specific widget, I did everything but it is not changing I imported the font files into the project and created a "fonts" folder for it then declared the font in the pubspec

I am using PlayfairDisplay and I've tried Roboto but it is still not changing

uses-material-design: true
fonts:
  - family: PlayfairDispaly
    fonts:
      - asset: fonts/PlayfairDisplay-Bold.ttf
        style: bold

https://stackoverflow.com/questions/44366398/flutter-custom-font-not-displaying — CopsOnRoad, Aug 18 '19 at 15:22

score 0 · Answer 1 · answered Aug 18 '19 at 16:38

You may incorrectly defined the Font Family name

family: PlayfairDispaly fonts: - asset: fonts/PlayfairDisplay-Bold.ttf style: bold

you should write it as PlayfairDisplay not PlayfairDispaly

as maybe you use it in your widget with this code :

Text(
  "Hello World",
  style: TextStyle(
    fontFamily: "PlayfairDisplay",
  ),
),

score 0 · Answer 2 · answered Aug 19 '19 at 09:59

When using google fonts in flutter you must take care of the spaces and the tabs, also you should make sure that the font family name is exactly the same 'case sensitive' in both the dart file and the pubspec.yaml file

the main.dart file should has a code like this :-

Text(
  'FullStack Developer',
   style: TextStyle(
   fontSize: 20.0,
   color: Colors.black,
   fontFamily: 'Playfair Display',
   letterSpacing: 2.0,
   fontWeight: FontWeight.bold,
   ),
  ),

and for the pubspec.yaml try this:-

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

How to add a custom font?

2 Answers2