2021/5/28 : Flutter : Use a custom fontの訳

 

注意:基本的に下記説明の通りにやればフォントは変わるんですが、一つだけ、pubspec.yamlファイルの設定はホットリロードでは反映されないので、試す場合「プログラム停止→再実行」が必要です

それを知らないと「何回ホットリロードしても全くフォントが変わらない」あるいは「変わったり変わらなかったりする」ということになるので注意してください笑


Use a custom font

Although Android and iOS offer high quality system fonts, one of the most common requests from designers is for custom fonts. For example, you might have a custom-built font from a …

2021/2/10 google_fonts,Readmeの訳

google_fonts

Flutterのgoogle_fontsパッケージを使用すると、Flutterアプリでfonts.google.comの977フォント(およびそのバリアント)を簡単に使用できます。


Getting Started

google_fontsパッケージを使用すると、.ttfまたは.otfファイルをアセットフォルダーに保存してpubspecにマッピングする必要はありません。

代わりに、実行時にhttp経由で一度フェッチし、アプリのファイルシステムにキャッシュすることができます。

これは開発に理想的であり、アプリバンドルのサイズを縮小しようとしている本番アプリに適した動作になる可能性があります。

それでも、いつでもassetsディレクトリにフォントファイルを含めることを選択することもできます。GoogleFontsパッケージはhttpフェッチよりも事前にバンドルされたファイルを優先します。

このため、Google Fontsパッケージを使用すると、開発者は同じAPIを使用しながら、フォントを事前にバンドルするか、http経由で読み込むかを選択できます。


たとえば、FlutterアプリでGoogleFontsのLatoフォントを使用するとします。

まずgoogle_fontsパッケージをpubspec.yamlファイルに追加します。

そしてインポートするためにimport文を記述します。

import 'package:google_fonts/google_fonts.dart';

デフォルトのTextStyleでGoogleFontsを使用するには:

Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(),
),

または、フォントを動的にロードする場合:

Text(
  'This is Google Fonts',
  style: GoogleFonts.getFont('Lato'),
),