Tuesday, October 16, 2018

Flutter how to use custom fonts?

Below are the main steps in using the custom font in a flutter app


    Import the font files
    Declare the font in the pubspec.yaml
    Set a font as the default
    Use a font in a specific Widget

Place the custom font ttf files inside Fonts or assets folder

awesome_app/
  fonts/
    Raleway-Regular.ttf
    Raleway-Italic.ttf
    RobotoMono-Regular.ttf
    RobotoMono-Bold.ttf


In pubspec.yaml file, define the fonts

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


Below are the ways it can be used within the app

MaterialApp(
  title: 'Custom Fonts',
  // Set Raleway as the default app font
  theme: ThemeData(fontFamily: 'Raleway'),
  home: MyHomePage(),
);


Text(
  'Roboto Mono sample',
  style: TextStyle(fontFamily: 'RobotoMono'),
);



References:
https://flutter.io/cookbook/design/fonts/

No comments:

Post a Comment