如何在此 flutter 代码中添加自定义字体

Question

I need to add my own custom font file to the code below. I don't want to use google fonts here. How can I add custom font. I already added the font file in pubspec.yaml and the folder.

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

/// Google fonts constant setting: https://fonts.google.com/
TextTheme kTextTheme(theme, String language) {
  switch (language) {
    case 'vi':
      return GoogleFonts.montserratTextTheme(theme);
    case 'ar':
      return GoogleFonts.ralewayTextTheme(theme);
    default:
      return GoogleFonts.robotoTextTheme(theme);
  }
}

TextTheme kHeadlineTheme(theme, [language = 'en']) {
  switch (language) {
    case 'vi':
      return GoogleFonts.montserratTextTheme(theme);
    case 'ar':
      return GoogleFonts.ralewayTextTheme(theme);
   
    default:
      return GoogleFonts.robotoTextTheme(theme);
  }
}

Answer 1

you can follow my answer

How to use custom fonts in Flutter?

The default font used in Flutter is Roboto. If you want to add a custom font in Flutter, you have 2 ways. If the font you want to add is available in Google Fonts, you can use google_fonts package available in Dart Pub. If the font you want to use is not available in Google fonts, you must add a TTF file of the font to assets and load it using pubspec.yaml. Both methods are described in the following tutorial.

1. Using google_fonts Package Install Package Add google_fonts to pubspec.yaml as shown in below. There are no other configurations required for the plugin on both iOS and Android operating systems.

   dependencies: flutter: sdk: flutter google_fonts: ^1.1.0

Usage google_fonts package can be used to apply any desired font available on google fonts both as TextStyle of a Text() widget and inside the Theme() widget. Both the examples are shown below.

/// Example usage in text widget
/// as style property
Text(
  'This is an example of using GoogleFonts in text widget',
  style: GoogleFonts.montserrat(
    textStyle: Theme.of(context).textTheme.headline3,
    fontWeight: FontWeight.w400,
    fontStyle: FontStyle.italic,
    color: primaryColor),
)

/// Example usage in TextTheme
TextTheme(
      headline2: GoogleFonts.lato(
          color: Colors.black,
          fontSize: 48.0,
          letterSpacing: -1.5
      ),
),

2. Adding fonts not available in Google fonts Add TTF file of the font to assets The first step is to get the TTF file of the font you would like to use and add it to the assets of your app. The folder structure is shown in the image below.

Add font to pubspec.yaml Now we need to add the font to pubspec.yaml as shown below. This will load the font for usage inside our app.

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  fonts:
    - family: Lora
      fonts:
        - asset: assets/fonts/Lora-Regular.ttf
        - asset: assets/fonts/Lora-Bold.ttf
          weight: 800
        - asset: assets/fonts/Lora-Medium.ttf
          weight: 600
        - asset: assets/fonts/Lora-SemiBold.ttf
          weight: 500
        - asset: assets/fonts/Lora-Italic.ttf
          style: italic
          weight: 500
  uses-material-design: true
  assets:
    - assets/icons/

Usage Example usage of the font both as style of a Text() widget.

/// Example usage of cutom font in Text widget
Text(
  "Example usage of cutom font in Text",
  textAlign: TextAlign.center,
    style: Theme.of(context).textTheme.subtitle1.copyWith(
      fontFamily: 'Lora',
    ),
)

in details https://educity.app/flutter/how-to-use-custom-fonts-in-flutter

Answer 2

You can simply copy your font file to the assets folder or where ever you wish and add it to pubspec.yaml font section.

.yaml file:

# example:
  fonts:
    - family: Lato
      fonts:
        - asset: fonts/Lato-Regular.ttf

After this basic setup you can directly use the added font in the TextStyle and return that instead of the GoogleFont

TextTheme kTextTheme(theme, String language) {
  switch (language) {
    case 'vi':
      return return TextStyle(
      fontFamily: 'Lato',
      color: Colors.black,
      fontSize: 18,
    );
    case 'ar':
      return return TextStyle(
      fontFamily: 'Lato',
      color: Colors.black,
      fontSize: 18,
    );
    default:
      return return TextStyle(
      fontFamily: 'Lato',
      color: Colors.black,
      fontSize: 18,
    );
  }
}