How do I use custom font with a set size in flutter/dart?

Question

I'm trying to use color, fontWeight and fontFamily with style: style.copyWith, the custom font I'm trying to use is Vonique, I've imported it like so into pubspec.yaml

fonts:
       - family: Vonique
         fonts: 
           - assets: fonts/Vonique-64-Bold-Italic.ttf
           - assets: fonts/Vonique-64-Italic.ttf
           - assets: fonts/Vonique-64-Bold.ttf
           - assets: fonts/Vonique-64.ttf

Is this the correct way to import it?

I've tried it both was with '' and without '', still doesn't change the text font.

Text('Login',
 style: style.copyWith(
   color: Colors.redAccent, fontWeight: FontWeight.bold, fontFamily: 'Vonique'
),
),

and

Text('Login',
 style: style.copyWith(
   color: Colors.redAccent, fontWeight: FontWeight.bold, fontFamily: Vonique
),
),

I want the font to look like the one here https://www.dafont.com/vonique-64.font but it's not looking like that one.

Filled Stacks · Accepted Answer · 2019-04-20 16:31:40Z

1

If you want to apply font to a text you don't use the copyWith. Just set your style using a new TextStyle.

Text('Login', style: TextStyle(fontFamily: 'Vonique',  fontWeight: FontWeight.bold))

If you want to apply text globally then in your material app you can apply global text changes by creating a copy of the current theme and applying some new properties like below.

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
     // Uncomment in phase 3 to apply white to text
    textTheme: Theme.of(context).textTheme.apply(
      bodyColor: Colors.white,
      displayColor: Colors.white
    ),
  ),
  home: HomeSingleFile(),
);

On the same note if you have an existing style that you want to apply with some additional changes use the .apply method instead of copyWith.

answered Apr 20, 2019 at 16:31

Filled Stacks

4,3861 gold badge29 silver badges44 bronze badges

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

2 Comments

overdeveloping Over a year ago

Alright, I also couldn't get TextStyle to work so that's why I used style.copyWith, but now it works. It also seems that I had another text style interfering with this one, so a quick removal worked. Thanks again.

Filled Stacks Over a year ago

@overdeveloping awesome. Mark this as the correct answer for other devs to know it's solved.

Aïmane Najja · Accepted Answer · 2019-06-02 15:07:40Z

1

Don't forget to stop the app from debugging and starting your app again. If you don't, the changes you make for the fonts in pubspec.yaml won't be visible with Hot Reload or even Hot Restart.

    fonts:
      - family: Source Sans Pro
      fonts:
        - asset: fonts/SourceSansPro-Regular.ttf
        weight: 400
        - asset: fonts/SourceSansPro-SemiBold.ttf
        weight: 600
        - asset: fonts/SourceSansPro-Bold.ttf
        weight: 700
        - asset: fonts/SourceSansPro-Black.ttf
        weight: 900

The reason I specified the weight under each font is because this makes FontWeight.w400 for example refer to Regular and FontWeight.w900 to Black.

This is how I have used it in my code:

    Text("Planning",
         style: TextStyle(
         color: Color(0xFF43b3e0),
         fontFamily: "Source Sans Pro",  // <- Looks up the specified font in pubspec.yaml
         fontWeight: FontWeight.w700,    // <- uses the Bold font weight
         fontSize: 28.0),
    ),

answered Jun 2, 2019 at 15:07

Aïmane Najja

112 bronze badges

1 Comment

Aïmane Najja Over a year ago

like 'android' says the proper way of specifying the fontFamily is with single quotes but double works too.

android · Accepted Answer · 2019-04-20 16:34:11Z

0

To set custom font in text field: (Use it with single quotes is the proper method)

Text(
  'I like custom fonts',
  style: TextStyle(fontFamily: 'Vonique'),
);

To set custom font with font size:

Text(
  'I like custom fonts',
  style: TextStyle(
            fontFamily: 'Vonique',
            fontSize: 20.0,
         ),
);

If you want to define font weight then you can define it in pubspec.yaml file such as below:

flutter:
  fonts:
    - family: Vonique
      fonts:
        - asset: Vonique-64-Bold-Italic.ttf
          weight: 500

answered Apr 20, 2019 at 16:34

android

3,1201 gold badge19 silver badges21 bronze badges

Comments

Dharmesh Mansata · Accepted Answer · 2019-12-12 06:54:05Z

0

If we are using google_fonts package then .ttf files do not need to be stored in your assets folder and mapped in the pubspec. Instead, they are fetched once via HTTP at runtime and cached in the app's file system.

Text(
  'This is Fonts',
  style: GoogleFonts.lato(
    textStyle: TextStyle(color: Colors.blue, letterSpacing: .5),
  ),
),

answered Dec 12, 2019 at 6:54

Dharmesh Mansata

4,7801 gold badge31 silver badges36 bronze badges

Comments

CoderUni · Accepted Answer · 2020-08-30 17:12:16Z

0

Set this in pubspec.yaml

flutter:
  fonts:
  - family: Quicksand
    fonts:
    - asset: assets/fonts/Quicksand-Regular.ttf

edited Aug 30, 2020 at 17:12

CoderUni

6,2049 gold badges31 silver badges62 bronze badges

answered Aug 30, 2020 at 14:45

user14191714

Comments

Sumit Singh · Accepted Answer · 2020-10-27 06:11:21Z

You have to define family according to this in your pubspec.yaml file, then you can easily use custom fonts in your code:

fonts:
 - family: roboto_regular
   fonts:
     - asset: assets/fonts/Roboto-Regular.ttf
 - family: roboto_italic
   fonts:
     - asset: assets/fonts/Roboto-Italic.ttf
 - family: roboto_black
   fonts:
     - asset: assets/fonts/Roboto-Black.ttf
 - family: roboto_bold
   fonts:
     - asset: assets/fonts/Roboto-Bold.ttf
 - family: roboto_light
   fonts:
     - asset: assets/fonts/Roboto-Light.ttf

then use this in your code like this;-

Text(
    "Some Text",
    overflow: TextOverflow.clip,
    maxLines: 1,
    style: TextStyle(
      fontFamily: 'roboto_bold',
      // The color must be set to white for this to work
      color: Colors.white,
      fontStyle: FontStyle.normal,
      fontWeight: FontWeight.w700,
      fontSize: 15,
    ),

Collectives™ on Stack Overflow

How do I use custom font with a set size in flutter/dart?

6 Answers 6

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related