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

5,330

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

Solution 2

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),
    ),
Share:
5,330
overdeveloping
Author by

overdeveloping

Updated on December 10, 2022

Comments

  • overdeveloping
    overdeveloping 11 months

    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.

  • overdeveloping
    overdeveloping over 4 years
    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
    Filled Stacks over 4 years
    @overdeveloping awesome. Mark this as the correct answer for other devs to know it's solved.
  • Aïmane Najja
    Aïmane Najja over 4 years
    like 'android' says the proper way of specifying the fontFamily is with single quotes but double works too.