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

问题

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.

回答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.

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

回答3:

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

回答4:

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

回答5:

Set this in pubspec.yaml

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

回答6:

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

来源：https://stackoverflow.com/questions/55775373/how-do-i-use-custom-font-with-a-set-size-in-flutter-dart

标签

css

fonts

dart

Flutter