“This is the 27th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

The introduction of the font

First create a fonts directory in your project, then place the TTF file in that directory, and then add the font file to the pubSpec file as follows:

.
flutter:
  fonts:
    - family: PingFang
      fonts:
        - asset: fonts/PingFang-Regular.ttf

  assets:
    - assets/exit_icon.png
Copy the code

Here, family is our customized font, and each font can correspond to multiple TTF files, such as distinguish bold:

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: assets/fonts/Raleway-Regular.ttf
        - asset: assets/fonts/Raleway-Medium.ttf
          weight: 500
        - asset: assets/fonts/Raleway-SemiBold.ttf
          weight: 600
    - family: AbrilFatface
      fonts:
        - asset: assets/fonts/abrilfatface/AbrilFatface-Regular.ttf
Copy the code

• Family is the font name that you can use in the fontFamily property of TextStyle.
• Asset is the path relative to the pubspec.yaml file. These files contain the outline of the glyphs in the font. When the application is built, these files are included in the application’s Asset package.

You can set the font thickness, tilt and so on

• The weight property specifies the size of the font. The value is a hundred (multiple of 100) between 100 and 900. These values correspond to FontWeight, which can be used in the FontWeight property of a TextStyle
• Style specifies whether the font is slanted or normal. The corresponding values are italic and normal. These values correspond to the FontStyle TextStyle property that can be used for TextStyle

Once you’ve introduced fonts, you can use them in sytle for Text

Text(
    "test",
    style: TextStyle(fontFamily: "Rock Salt",),)Copy the code

Global font

If you want to set the global font, you need to set it in the App as follows:

MaterialApp(
  title: title,
  theme: ThemeData(
    primarySwatch: Colors.blue,
    visualDensity: VisualDensity.comfortable,
    fontFamily: "PingFang",
    textTheme: TextTheme(
      ...
    )
  ),
  ...
);
Copy the code

So the global font becomes the font that we set.

The problem

But there are two minor problems with flutter Web (not tested on other platforms) :

Library Settings are invalid

We encapsulated the basic functions in a library (in the form of GitSubModule, so it was not published). In fact, the BaseApp hosting the MaterialApp is also in the Library, so we put the font file in the library at the beginning. The fontFamily is then set in the BaseApp MaterialApp.

However, it was found that the font had not changed at all when the flutter build web was compiled. This font file was not found in the files generated in the build directory.

The simple solution is to add a font file to the main project and add the font to the main project’s PubSpec (the same name as in the library). When you run it, you’ll see that the fonts have changed, and build compiles the font file.

Font not in effect in TextSpan

TextSpan can be used to handle the need to mix text and text. For example, the first line of text should start from the left of the image and wrap around the image. In this case, TextSpan+WidgetSpan is enough.

However, when the global font is set on Flutter Web (not tested on other platforms), the font in TextSpan does not take effect and is still the system font.

TextSpan is a little bit special. We know that the Text source code for style actually does a merge operation, merge the default style (defaultTextStyle). In TextSpan’s source code, however, this step is not found, so setting the global font does not apply to it.

So wherever you use TextSpan you have to set the font separately if you want.