FlutterでGoogleフォントを使用します。

まずはパッケージであるgoogle_fontsを利用します。

ターミナルで、flutter pub add google_fontsを実行します。

さらにターミナルでflutter pub getを実行しましょう。

google_fontsをインポートしましょう。

import 'package:google_fonts/google_fonts.dart';

Textの中に、styleGoogleFontsを設定します。

Text(
  'タップした回数が表示されます:',
  style: GoogleFonts.,
),

Flutterで使用できるGoogleフォントの一覧を調べます。

MacとVisual Studio Codeを使用している場合、GoogleFontsをcommandキーを押しながらクリックします。

google_fonts.dartファイルに移動しますので、asMapの下がフォントの一覧になります。

Googleフォントのサイトのスタイル名と照らし合わせて検索してみてください。

今回は、Kosugi Maruを使いたいので、google_fonts.dartでKosugi Maruを検索します。

image2

該当する場所の値の通り、スタイルを、GoogleFonts.kosugiMaruにします。

Text(
  'タップした回数が表示されます:',
  style: GoogleFonts.kosugiMaru(),
),

フォントサイズなどを設定したい場合は、kosugiMaruの後の()に設定します。

Text(
  'タップした回数が表示されます:',
  style: GoogleFonts.kosugiMaru(
    fontSize: 36,
    fontWeight: FontWeight.w700,
  ),
),

画面を確認すると、

image3

フォントが、Kosugi Maruへ変更されました。

GoogleフォントをFlutter全体に反映させたい場合、themeで設定します。

Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
      textTheme: GoogleFonts.kosugiTextTheme(),
    ),
    home: const MyHomePage(title: 'Flutter Demo Home Page'),
  );
}

Textのstyleは、通常通り使用できます。

Text(
  'タップした回数が表示されます:',
  style: TextStyle(
    fontSize: 36,
    fontWeight: FontWeight.w700,
  ),
),

image4

Googleフォントのサイトにはフォントが存在するが、Flutterのgoogle_fontsパッケージの一覧に存在しない場合、フォントをダウンロードし、使用することもできます。

今回は、BIZ UDPGothicを使用します。

image5

assetsフォルダを作成し、さらにfontsフォルダを作成します。

BIZ UDPGothicフォントをダウンロードし、fontsフォルダに移動します。

image6

pubspec.yamlでfontsを設定します。

fonts:
  - family: BIZUDPGothic
    fonts:
      - asset: assets/fonts/BIZUDPGothic-Bold.ttf
      - asset: assets/fonts/BIZUDPGothic-Regular.ttf

main.dartのthemefontFamifyを設定します。

Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
      fontFamily: 'BIZUDPGothic',
    ),
    home: const MyHomePage(title: 'Flutter Demo Home Page'),
  );
}

画面を確認すると、

image7

BIZ UDPGothicが反映されました。

ブログ一覧