Document how to use a custom font

[sethladd]

I can't find any docs on how to change the font of my app. For example, I'd like to use "Roboto Condensed" (https://www.google.com/fonts/specimen/Roboto+Condensed) instead of Roboto in my otherwise-material-defaults app.

Thanks!

[sethladd]

The game uses a custom font, declared in the flutter.yaml file. Example is here: https://github.com/flutter/game/blob/master/flutter.yaml

However, that's only required if iOS or Android does not have the desired font already on the operating system.

[abarth]

If you look on an Android device in /etc/fonts.xml, you'll see the mapping that Android provides from font families to physical fonts.

In particular, sans-serif maps to Roboto. sans-serif-condensed maps to RobotoCondensed.

For iOS, we should make use of uses-material-design key in the manifest to add these font family names by including these ttf files into the FLX.

[sethladd]

Added #2867 to capture uses-material-design to also imply Roboto Condensed.

[sethladd]

To document: "Can the names I use in the family key of the flutter.yaml contain spaces?" e.g. "Roboto Condensed" or do I need to use "RobotoCondensed" ? And, do the font family names need to match, in any way, the font file name used in the fonts / asset key? Is there any relationship between the two?

[abarth]

And, do the font family names need to match, in any way, the font file name used in the fonts / asset key?

Nope.

Is there any relationship between the two?

There's not necessary relationship. The relationship is just conventional. For example, if someone requests "times", they probably want some sort of serif font.

[eseidelGoogle]

It looks like the syntax used it to add:

fonts:
  - family: Orbitron
    fonts:
      - asset: fonts/Orbitron-Medium.ttf

To your flutter.yaml. At least that's how flutter/game did it (the only example I'm aware of).

[sethladd]

Once I have the flutter.yaml updated, how do I use it in my code? (create a new Theme with data that points to a ThemeData that has the font, and a child that is the rest of my app?) I looked at Pesto to gleen that.

(asking so that when we do get to documenting this, we'll know how :)

[sethladd]

We can also mention ThemeData.apply :)