FlutterでLINEフォント(LINE Seed JP)を試してみた!

2022年10月24日、LINEのコーポレートフォント『LINE Seed』の日本語書体がリリースされました。

https://linecreative.jp/n/n67703434de5f

ライセンスは以下です。
有料販売を除く商用利用が可能となっており、アプリにも使うことができそうです。

Flutterアプリへの導入例

早速、弊アプリ「はま図書」に入れて試してみました。
左が「LINESeedJP」、右が「NotoSansfJP」です。
丸っこくて可愛い感じになりました。

収録文字数が9,354文字ということで、文字が足りなくて結構文字化けするのかなぁと思って、本を検索して色々試してみましたが、特に問題なく表示できていました。
以下の通り、「あ゛」は表示出来ていませんでしたが、まぁそれは問題ないと思います。

図書館アプリにこの可愛らしさはいかがなものかとは思いますが「誰もが見慣れたフォントを使う」という意味では利点はあるのかもしれません。

とりあえずこれでリリースしてみて、不評であれば元に戻そうかと思います。

Flutterアプリへの導入方法

フォントを配置

LINE Seedのページからフォントファイルをダウンロードします。

ダウンロードしたファイルを解凍し、App/OTF/*.otfをFlutterプロジェクトのassets/fonts/にコピーします(ディレクトリがなければ作ります)。

OTFがよいのかTTFがよいのか正直よくわかっていません。元のフォントがOTF使っていたのでそれに倣った感じです。TTFの方が良い場合は誰か理由を教えてください。

フォントの設定

pubspec.yamlにフォントの名前とファイルの場所を定義します。

pubspec.yaml
flutter:
  〜
  fonts:
  - family: LINESeedJP
    fonts:
      - asset: assets/fonts/LINESeedJP_A_OTF_Th.otf
        weight: 100
      - asset: assets/fonts/LINESeedJP_A_OTF_Rg.otf
        weight: 400
      - asset: assets/fonts/LINESeedJP_A_OTF_Bd.otf
        weight: 700
      - asset: assets/fonts/LINESeedJP_A_OTF_Eb.otf
        weight: 800
  〜      

アプリ全体で使うフォントして設定します。

lib/main.dart
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
            〜
      theme: ThemeData(
        fontFamily: 'LINESeedJP', // 追加
      ),

フォントを使う

アプリ全体で使うフォントとして設定しているので、普通にTextウィジェットを使うば、LINEフォントで表示されます。

以上、FlutterでLINEフォント(LINE Seed JP)を使う方法をお届けしました。

この記事を気に入っていただけたらLINEフォントを導入した弊アプリ「はま図書」をぜひダウンロードしてお試しください。さっき申請出したので明後日にはリリース出来ていると思います。

・iOS

‎はま図書-横浜市立図書館蔵書検索ページをもっと便利に使おう!
‎横浜市立図書館の蔵書検索ページ(以下公式サイト)をもっと便利に使おう!※本アプリは非公式アプリです。横浜市立図書館へ問い合わせるのはお控えください。※本アプリを利用するには横浜市立図書館の図書カード番号の登録が必要です。◆利用状況を自動取得!面倒な操作は不要!アプリ起動時に現在の利用状況を自動で取得するから面倒な操作...

・Android

はま図書-横浜市立図書館蔵書検索ページをもっと便利に使おう! - Google Play のアプリ
家族の図書カードをまとめて運用!利用状況は自動取得で面倒な操作不要。図書館への行き忘れ防止、便利なワンタップ登録。公式非対応の一括予約や目安期間、履歴にも対応。

コメント

タイトルとURLをコピーしました