How do I use custom font with a set size in flutter/dart?
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),
),
overdeveloping
Updated on December 10, 2022Comments
-
overdeveloping 11 months
I'm trying to use
color
,fontWeight
andfontFamily
withstyle: style.copyWith
, the custom font I'm trying to use isVonique
, I've imported it like so intopubspec.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 over 4 yearsAlright, 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 4 years@overdeveloping awesome. Mark this as the correct answer for other devs to know it's solved.
-
Aïmane Najja over 4 yearslike 'android' says the proper way of specifying the fontFamily is with single quotes but double works too.