CODEWITHSUNDEEP
flutterdartfonts
Govaadiyo
Govaadiyo

Reputation: 6082

Confusion to add custom fonts in flutter app

I know how to add custom fonts in the app. But confusion in weight and style.

For Ex.

If I'm adding Montserrat font in the app and In my app's asset folder has is only Montserrat-Regular.ttf So in pubspec.yaml file I wrote.

 fonts:
    - family: Montserrat
      fonts:
        - asset: asset/fonts/Montserrat-Regular.ttf

And in the Text widgets I used all the 3 normal, bold and italic and it's working!!!

Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'This is normal font',
              style: TextStyle(
                fontFamily: 'Montserrat',
              ),
            ),
            SizedBox(height: 10),
            Text(
              'This is bold font',
              style: TextStyle(
                fontFamily: 'Montserrat',
                fontWeight: FontWeight.bold
              ),
            ),
            SizedBox(height: 10),
            Text(
              'This is italic font',
              style: TextStyle(
                  fontFamily: 'Montserrat',
                fontStyle: FontStyle.italic
              ),
            ),
          ],
        )

So If regular font will work for bold and italic then in the Official tutorial Why adding 

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: fonts/Raleway-Regular.ttf
        - asset: fonts/Raleway-Italic.ttf
          style: italic
    - family: RobotoMono
      fonts:
        - asset: fonts/RobotoMono-Regular.ttf
        - asset: fonts/RobotoMono-Bold.ttf
          weight: 700

Raleway-Italic.ttf and RobotoMono-Bold.ttf ???? They should have add only regular fonts in asset and it could work I think?

And another things In my above code. if I set

I can not find any difference.

OR

if I set

I can not find any difference.

Why, one will explain me.

Upvotes: 4

Views: 4487

Answers (2)

Shin Lv
Shin Lv

Reputation: 23

I have the same exact question. Flutter doesn't even need an italic .otf to render an italic styled text. This is very confusing. So I took sometime to conduct a small experiment:

Flutter-generated italic text from Montserrat 48pt Extra-Light Normal V.S. Montserrat 48pt Extra-Light italic.otf text

They look different! The result shows Flutter can automatically generate some "italic style" text from whatever font it currently has. But that's not necessarily look as the same as the real italic font file that designer created.

Upvotes: 1

LgFranco
LgFranco

Reputation: 1044

If you have a font with variants (diferents fonts from italic or Bold/Medium) you can define them in the same font family:

  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/roboto/Roboto-Black.ttf
          weight: 900
        - asset: assets/fonts/roboto/Roboto-BlackItalic.ttf
          style: italic
          weight: 900
        - asset: assets/fonts/roboto/Roboto-Bold.ttf
          weight: 700
        - asset: assets/fonts/roboto/Roboto-BoldItalic.ttf
          style: italic
          weight: 700
        - asset: assets/fonts/roboto/Roboto-Italic.ttf
          style: italic
        - asset: assets/fonts/roboto/Roboto-Light.ttf
          weight: 300
        - asset: assets/fonts/roboto/Roboto-LightItalic.ttf
          style: italic
          weight: 300
        - asset: assets/fonts/roboto/Roboto-Medium.ttf
          weight: 500
        - asset: assets/fonts/roboto/Roboto-MediumItalic.ttf
          style: italic
          weight: 500
        - asset: assets/fonts/roboto/Roboto-Regular.ttf
        - asset: assets/fonts/roboto/Roboto-Thin.ttf
          weight: 100
        - asset: assets/fonts/roboto/Roboto-ThinItalic.ttf
          style: italic
          weight: 100

In my Roboto exemple:

If you use the font family Roboto and a text with default weight it will use the Roboto-Regular.ttf

But if you use the italic style it will use the Roboto-Italic.ttf

I have variations to BOLD, MEDIUM, THIN and each ITALIC form.

It makes the font be more polish than the font that were software styled...

In the pubspec.yaml file, you have fonts that can have one or more children - family that can have one or more children fonts (for variants that works exactly the way that works in css font-family: Arial, Helvetica, sans-serif;).

fonts can have one or more children of - asset and it can have weight and/or style as children or none.

Upvotes: 3

Related Questions