I am using font-family called "FFShamelFamily". I added two sub-font families as shown in the picture below. When I run my app, it uses the first sub-fontFamily: "SansOneBook" only. I try to use fontWeight to make use of the second sub-fontFamily:"SansOneBold" but it doesn't show. I mean that I want to use both of the sub-FontFamily, the bold one for titles and the other one for any text in the app. How can I do it?
When using a custom font you need to specify which FontFamily to use on a TextStyle. Your “sub” font FFShamelFamily-SansOneBold is correctly set up in your pubspec.yaml as a weight variation of the same Font Family.
To use it in a textStyle you simply have to use the weight you set it to with the correct family name:
Text(
“Hello, world”,
style: TextStyle(
fontFamily: “FFShamelFamily”,
fontWeight: FontWeight.w900,
),
)
Please check the official flutter documentation for using custom fonts to learn more.
Related
I'm using GoogleFonts api in my flutter app but right now I am setting the fontStyle for every text manually to GoogleFonts.roberto but I want to set that as default in ThemeData in main.dart. But the fontFamily: GoogleFonts.roberto throws an error saying expected an string value so how can I achive that?
You can use it like this to make or modify an entire text theme to use the "Roboto" font as mentioned in their official document:
MaterialApp(
theme:ThemeData(
textTheme: GoogleFonts.robotoTextTheme(
Theme.of(context).textTheme,
),
);
In Flutter we can use TextStyle to provide a desired fontFamily property for the text.
While some fontFamily names are obvious and do work (like 'Arial', 'Courier', 'Times' and so on), where's the full list of available options?
The docs (https://api.flutter.dev/flutter/painting/TextStyle/fontFamily.html) don't help.
I do not think such a list is provided by the Flutter team. The fonts you mention are probably system default fonts. Flutter handles the use of custom fonts with a 'Custom Font Fallback'. Listed below is a tool snippet of how this goes to work:
Snippet
In the following example, any glyphs not present in the font Raleway will be attempted to be resolved with Noto Sans CJK SC, and then with Noto Color Emoji:
const TextStyle(
fontFamily: 'RaleWay',
fontFamilyFallback: <String>[
'Noto Sans CJK SC',
'Noto Color Emoji',
],
)
If all custom fallback font families are exhausted and no match was found
or no custom fallback was provided, the platform font fallback will be used.
Since you do not provide any FallBack fonts, Flutter automatically uses the the fonts default to your system of choice.
I hope this you understand what happens now! Please look at the documentation on how to add custom fonts:
Flutter font documentation
You don´t need to worry about the default fonts.
You can download a font that you like from here https://fonts.google.com/
Then add it to your assets folder, and update your pubspec.yaml
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
fonts:
- family: yourFont
fonts:
- asset: assets/fonts/yourFont.ttf
- family: otherFont
fonts:
- asset: assets/fonts/otherFont.ttf
After that, you can use it like this:
Text('Some text',
style: TextStyle(
color: Colors.blue,
fontFamily: 'yourFont',
fontSize: 22.0,
),
),
I recently encountered the same problem with fonts and Flutters incomplete documentation of font list.
A much easier solution for me was to import Google's font library:
//Import the font package
import 'package:google_fonts/google_fonts.dart';
//Use the Font package instead of TextStyle with your custom tweeks
Text('Sign Up',
style: GoogleFonts.poppins(
color: const Color.fromARGB(255, 59, 59, 61),
fontSize: 64,
fontWeight: FontWeight.w900,
),
),
And the list of fonts offered by this library is HUGE.
check them out with complete examples from here:
https://fonts.google.com/
When trying to underline a mix of English and Japanese (or Chinese or Korean), the underline is not aligned, even when textBaseline is set to ideographic.
Code used to produce the above image:
Text(
"可愛い lovely",
style: TextStyle(
fontSize: 48,
decoration: TextDecoration.underline,
textBaseline: TextBaseline.ideographic,
),
),
I thought the main purpose of ideographic text baseline is to address problems like this, but it made no visible differences. How should textBaseline be used then? And, is there any way to solve the underline misalignment issue in this case?
Edit:
Thanks to user #AnasMohammed pointing out the issue cannot be reproduced on DartPad, I then tried both Android and iOS. Seems like the problem only exists on Android. Sample results and "full code" available: https://i.imgur.com/jOeO5th.png
need a way to copy a custom text that i give it a font-style and other styles if possible in my flutter app, currently while working on my app i can copy the text i want to clipboard and use it later but with out any style.
this is how now i copy the text which dont work for me the way i want.
ClipboardData data = ClipboardData(text:sample);
Clipboard.setData(data);`
this is how i can copy the default text but insted i want to copy a custom text like next.
Text(
sample,
style: TextStyle(
fontSize: 20,
fontFamily: IndieFlower,
),
)`
My app supports two localizations 1] English 2] Arabic. Localization is working perfectly throughout the app.
But there are certain scenarios where I need to show text only in the English language but app changing it to as per selected localization. So all prices are shown in Arabic for Arabic localization.
I tried to put explicit Locale (NOT sure whether it is supposed to do like this) in a Text widget but still, that didn't work for me.
Text('3434', // Dynamic String from server
locale: Locale('en'),
style: TextStyle(fontSize: 16))
Actual Result When Arabic Localization is selected :
Expected Result :
set font-family specifically to those texts that doesn't need the arabic font. That way, it will override the default one.
We need to set fontFamily to Text Widget to whichever language-specific you want. For me, I just set the fontFamily like this,
Text(
value,
style: TextStyle(fontSize: 16, fontFamily: 'OpenSans'),
),
Hope this will be useful for someone.
Text(item.price, textDirection: TextDirection.ltr,) will make the TextDirection to be always in English 'ltr' left to right.
I hope that helps.