Logo

dev-resources.site

for different kinds of informations.

Using condensed font with Flutter

Published at
8/3/2023
Categories
flutter
vscode
font
Author
bigbott
Categories
3 categories in total
flutter
open
vscode
open
font
open
Author
7 person written this
bigbott
open
Using condensed font with Flutter

Sometimes small font is too small, but the condensed one is exactly the one that can save the design. Below are the steps required to add and use a condensed font in the Flutter project.

1. Choose and download the font.
Go to Google Fonts and choose font:

Image description

(I have typed Russian word to easily find fonts that support Russian.)

Select font. On the font page press Download family button on the right top. Save the zip locally and extract.

I have chosen two fonts: Fira Sans Extra Condensed and Sofia Sans Extra Condensed. They both support Cyrillic letters.

2. Add font files to the assets folder.

Create an assets folder (if not already exists) at the root of the project. Add a google_fonts folder under. Put fonts (.ttf files) there.

Image description

I renamed the Sofia font file as the filename was too long.

3. Add fonts to the pubspec.yaml

Image description

4. Use the font in the widget

Text(
                    description,
                    style: TextStyle(
                      fontSize: 11,
                      fontFamily: 'FiraExtraCond',
                    ),
                  ),
                  Text(
                    paymentType,
                    style: TextStyle(
                        fontSize: 14,
                        color: Theme.of(context).colorScheme.error,
                        fontFamily: 'SofiaExtraCond',
                        fontVariations: [
                          FontVariation('wght', 500),
                        ]),
                  ),
Enter fullscreen mode Exit fullscreen mode

Note, that Sofia is a variable font that supports FontVariations. I.e. single font file contains fonts with different wght (weight) variations.

Here is the result:

Image description

The first line is the default Roboto font, the second one is Fira and the last one is Sofia.

Obviously, using the above guide we can add any custom font, not only condensed and not only downloaded from Google Fonts.

Happy designing!

font Article's
30 articles in total
Favicon
Variable, Real Fonts: A Glimpse into the Future, plan "B"
Favicon
How to add custom fonts and viewports in storybook?
Favicon
Dafont: A Designer’s Best Friend for Unique Fonts
Favicon
Best Design Resources
Favicon
OTF vs TTF: Best Font Format for Flutter App Development
Favicon
Cool Banner Font Size Tool
Favicon
Liquid Display Fonts in Motion Graphics: Creating Visually Stunning Animations
Favicon
The Ultimate Guide to Choosing and Using Fonts for Your Projects
Favicon
Interactive Type + Code with Google Fonts
Favicon
Roboto's weight in Figma is fake
Favicon
Installing a Nerd Font in Ubuntu
Favicon
How To Use Google Fonts in web app🚀
Favicon
Unlock Limitless Creativity: 7000+ Fonts Bundle – Instant Installation Awesomeness!
Favicon
Unlock Limitless Creativity: 7000+ Fonts Bundle – Instant Installation Awesomeness!
Favicon
فونت فارسی ایران سنس – IranSansX
Favicon
TCPDF: How to add new custom font in tcpdf
Favicon
Why I love Monaspace font for coding
Favicon
Font Loading API: A Fun and Powerful Tool for Making Your Web Pages Look Amazing
Favicon
Zalgo Font Generator: Elevate Your Content with Creepy Text
Favicon
The typeface you didn't know you wanted and were trained to hate
Favicon
Using condensed font with Flutter
Favicon
La typographie en CSS...
Favicon
Grogie – Modern Serif Font
Favicon
Dynamic font-size using only CSS3
Favicon
Using custom fonts in a Chakra UI - React app
Favicon
Configuring your fonts in Next.js 13 with Stitches
Favicon
Como criar fonte de ícones
Favicon
How to use @next/font globally
Favicon
Creating your own handwriting into a usable font.
Favicon
Convert variable font to static font using Python

Featured ones: