M5Stack & ESP32で、TTFフォントを使用する

M5Stack & ESP32で、日本語を表示方法は、いくつかありますがこの記事では、TTFフォント（True Typeフォント）を使用して日本語の表示を行う方法について説明します。最初に、組み込み可能なフォントもご紹介します。

TTFフォントの表示には、OpenFontRenderライブラリを使用するのが便利です。

フォントの種類について

フォントには、文字の幅の扱い方の違いで２種類のフォントがあります。等幅フォント（Monospaced Font）とプロポーショナルフォント（Proportional Font）です。それぞれの特徴と用途について説明します。

等幅フォント（Monospaced Font）

等幅フォントは、すべての文字の幅が同じです。そのため、文字間隔が均一になり、表やソースコードなど、整列性を重視する場面でよく使用されます。

長所

• 文字間隔が均一で、表やソースコードなどの整列性が良い
• プログラミング言語のソースコードなど、シンボルと文字が混在する場面で読みやすい

短所

• 長文の文章を読むと、ぎこちなく感じる場合がある
• 文字によっては、無駄なスペースが空いてしまう場合がある

プロポーショナルフォント（Proportional Font）

プロポーショナルフォントは、文字によって幅が異なります。例えば、「i」のような細い文字は「W」のような太い文字よりも幅が狭くなります。そのため、自然な読み心地になり、長文の文章を読むのに適しています。

長所

• 長文の文章を読むと、自然な読み心地になる
• 文字の形に合ったスペースが使われるので、見た目的に美しい

短所

• 文字間隔が均一ではないので、表やソースコードなどの整列性が悪くなる
• プログラミング言語のソースコードなど、シンボルと文字が混在する場面で読みづらい場合がある

おすすめのTTFフリーフォント

M5Stack、ESP32（16MBのフラッシュメモリタイプ）で、プログラムに組み込み可能なフリーフォントをご紹介します。

Uemaruフォント：縦長で等幅の丸ゴシックフリーフォント

Uemaruフォントは、英数字も含め等幅フォントです。

尚、フォント名は「文字の上に半濁点（マル）をつける」ことから命名したとのことです。

特徴

• 丸ゴシックの等幅フォント。
• 少し縦長の字形。
• 濁点・半濁点は文字の上に付く。
• 半濁点が大きめ。
• JIS第1・第2水準の文字をすべて収録。
• 「モトヤLマルベリ3等幅」に存在しない記号をいくつか「M+ OUTLINE FONTS」から追加した。
• 「あ」＋「゛」のような濁点・半濁点合成字形を収録。外字または合字として使用可能。

仕様

• 縦書きに非対応。
• 濁点・半濁点合成字形は「合字としては」Adobe製品では使用不可。外字としては可能。
• ウェイト（太さ）はRegularしかない。

表示例

フォント情報

ダウンロード先及びライセンスは以下の表を参照ください。

モトヤLマルベリ3等幅 MotoyaLMaru／Kosugi Maru

モトヤLマルベリ3等幅とKosugi Maruフォントは、どちらも日本語の丸ゴシックの等幅フォントです。モトヤLマルベリ3等幅とKosugi Maruフォントは、元々は同一のフォントであり、「MotoyaLMaru W3 mono」という名称で販売されていました。その後、2012年にフォントワークス株式会社がモトヤフォントファミリーのライセンスを取得し、モトヤLマルベリ3等幅に改名されました。一方、Kosugi Maruフォントは、2016年にGoogle Fontsに収録される際に、現在の名称に変更されました。

以下、モトヤLマルベリ3等幅フォントの特徴です。

• ファイル名:モトヤLマルベリ3等幅 MotoyaLMaru.ttf
• 商業:無料の商用フォント
• フォント分類:商用OK
• ファイル拡張子:.ttf
• ファイルサイズ:2.44Mb
• フォント名:MotoyaLMaru
• フォント スタイル:W3 mono
• フォント識別ID:MTY MotoyaLMaru-W3-90ms-RKSJ-H
• 完全なフォント名:MotoyaLMaru W3 mono
• フォントバージョン:Version 1.01
• 重さ:400
• PostScript:MotoyaLMaru-W3-90ms-RKSJ-H
• 著作権情報:Copyright(C)2010 MOTOYA CO.,LTD.

表示例

フォント情報

ダウンロード先及びライセンスは以下の表を参照ください。

モトヤLマルベリ3等幅 MotoyaLMaru_フォントのダウンロード

モトヤLマルベリ3等幅 MotoyaLMaru.ttfサムネイル モトヤLマルベリ3等幅 MotoyaLMaru キャラクターマップ ファイル名:モトヤLマルベリ3等幅 MotoyaLMaru.ttf 商業:無料の商用フォント フォント分類

fontdomain.com

Kosugi Maru - Google Fonts

Kosugi Maru is a Gothic Rounded design, with low stroke contrast and monospaced metrics, and rounded terminals. Initiall...

fonts.google.com

Kosugi - Google Fonts

Kosugi is a Gothic design, with low stroke contrast and monospaced metrics. Initially developed by MOTOYA and released f...

fonts.google.com

Google Fonts に新たに追加された日本語フォントを使ってみた - Qiita

お盆休み中に、Webフォント「Google Fonts」の日本語フォントに新たな書体が追加されたようなので、早速使ってみました。…

qiita.com

さわらびフォント

さわらびフォントは、Creative Commons Attribution 3.0 ライセンスで公開されている日本語TrueTypeフォントです。さわらびゴシック（Sawarabi Gothic）およびさわらび明朝（Sawarabi Mincho）の2種類が公開されています。

特徴

さわらびフォントには、以下の特徴があります。

• すべての文字が作者のオリジナルデザイン
• 高い可読性を追求した設計
• 小さいサイズでも文字がはっきり見える
• シンプルでクラシカルなデザイン
• ウェブサイト、印刷物、同人誌など幅広い用途で利用可能

さわらびゴシック（Sawarabi Gothic）

Sawarabi Gothic - Google Fonts

Sawarabi Gothic (さわらびゴシック) is a Japanese font by mshio. Carefully designed for high legibility, it works well in small t...

fonts.google.com

さわらびゴシック（Sawarabi Gothic）｜いいフォント

さわらびゴシックフォントは、スタンダードでクラシカルなゴシック体の日本語フリーフォントです。可読性に優れており、サイズが

goodfreefonts.com

さわらびフォント - Wikipedia

ja.wikipedia.org

さわらびフォント プロジェクト日本語トップページ - OSDN

日本語フォントを開発するプロジェクトです。現在、Creative Commons Attribution 3.0 ライセンスの元でゴシック体と明朝体を公開しています（が、開発中なので、まだ文字が不足しています）。

ja.osdn.net

さわらび明朝（Sawarabi Mincho）

Sawarabi Mincho - Google Fonts

Sawarabi Mincho (さわらび明朝) is a Japanese font by mshio. With a delicate and beautiful design, it is suitable for text and ...

fonts.google.com

さわらび明朝（Sawarabi Mincho）｜いいフォント

さわらび明朝は、スタンダードな明朝体の日本語フリーフォントです。可読性に優れており、サイズが小さくても文字がはっきりして

goodfreefonts.com

フォント情報

ダウンロード先及びライセンスは以下の表を参照ください。

ZEN 角ゴシック New（Zen Kaku Gothic New）

ZEN 角ゴシック Newは、2020年にリリースされた日本語のサンセリフフォントです。シンプルなデザインと高い可読性を備え、Webサイトや印刷物など幅広い用途で利用されています。このフォントは、GoogleFontsから入手できます。

主な特徴

• シンプルなデザイン: 余計な装飾がなく、読みやすいフォントです。
• 高い可読性: 小さいサイズでも文字がはっきり見えるように設計されています。
• 豊富なウェイト: 5種類のウェイト（Light、Regular、Medium、Bold、Black）が用意されており、用途に合わせて使い分けることがで- きます。
• OpenTypeフォント: OpenTypeフォントの機能に対応しており、リガチャやスモールキャップなどの機能を利用することができます。
• 無償利用可能: 商用利用を含む無償で利用することができます。

主な用途

• Webサイト
  • シンプルで読みやすいデザインなので、Webサイトの本文や見出しなどに最適です。
• 印刷物
  • 白黒印刷やカラー印刷にも対応しており、パンフレットや書籍などの印刷物にも利用できます。
• UIデザイン
  • ボタンやメニューなどのUI要素にも利用できます。
• ロゴデザイン
  • シンプルで洗練されたロゴデザインを作成することができます。

5種類のフォント

• ZenKakuGothicNew-Regular.ttf
• ZenKakuGothicNew-Medium.ttf
• ZenKakuGothicNew-Light.ttf
• ZenKakuGothicNew-Bold.ttf
• ZenKakuGothicNew-Black.ttf

表示例

フォント情報

ダウンロード先及びライセンスは以下の表を参照ください。

Zen Kaku Gothic New - Google Fonts

Zen Kaku Gothic New is a contemporary Japanese gothic (san serif) typeface family. With this font, you can express fine ...

fonts.google.com

ZEN 角ゴシック New（Zen Kaku Gothic New）｜いいフォント

ZEN 角ゴシックフォントは、「使いやすい」「読みやすい」ように設計されたスタンダードなゴシック体フォントです。 シンプ

goodfreefonts.com

M PLUSフォント

M PLUSフォントは、日本で開発されたオープンソースのゴシック体フォントファミリーです。以下にその主な特徴を挙げます：

1. 多言語対応
   • 日本語だけでなく、英語やその他の多言語に対応しています。
2. 多様なウェイト
   • M PLUSには多くのウェイト（太さ）が用意されており、細いものから太いものまで様々なデザインニーズに応えます。
3. 視認性
   • 視認性に優れており、ディスプレイや印刷物など様々なメディアで使用されています。
4. オープンソース
   • SIL Open Font License（OFL）に基づいて配布されており、商用・非商用を問わず自由に使用することができます。
5. デザインの自由度
   • フォントファミリーには様々なスタイルが含まれており、クリエイティブなデザインの幅が広がります。
6. 継続的なアップデート
   • コミュニティによって継続的にアップデートされており、新しい文字やスタイルが追加されることがあります。

M PLUS（M+）は、デザインやドキュメント作成において幅広く活用できる信頼性の高いフォントファミリーです。

M PLUS 1

以下の９種類のウエイトが用意されています。

• MPLUS1-Thin.ttf
• MPLUS1-ExtraLight.ttf
• MPLUS1-Light.ttf
• MPLUS1-Regular.ttf
• MPLUS1-Medium.ttf
• MPLUS1-SemiBold.ttf
• MPLUS1-Bold.ttf
• MPLUS1-Black.ttf
• MPLUS1-ExtraBold.ttf

M PLUS 1P

以下の7種類のウエイトが用意されています。

• MPLUS1p-Thin.ttf
• MPLUS1p-Light.ttf
• MPLUS1p-Regular.ttf
• MPLUS1p-Medium.ttf
• MPLUS1p-Bold.ttf
• MPLUS1p-ExtraBold.ttf
• MPLUS1p-Black.ttf

M PLUS 2

以下の9種類のウエイトが用意されています。

• MPLUS2-Thin.ttf
• MPLUS2-ExtraLight.ttf
• MPLUS2-Light.ttf
• MPLUS2-Regular.ttf
• MPLUS2-Medium.ttf
• MPLUS2-SemiBold.ttf
• MPLUS2-Bold.ttf
• MPLUS2-ExtraBold.ttf
• MPLUS2-Black.ttf

フォント情報

ダウンロード先及びライセンスは以下の表を参照ください。

M PLUS（M+）｜いいフォント

M PLUS（M+）フォントは、直線と曲線のメリハリがきいて、少し丸みがありカッチリしすぎていない、使いやすいモダンな角

goodfreefonts.com

M PLUS 1 - Google Fonts

M+ FONTS is a little nifty font family for everyday usage. Mplus 1 is a Sans Serif font with nine weights from Thin to B...

fonts.google.com

M PLUS 1p - Google Fonts

The M+ Outline Fonts Project develops a superfamily set of several families: 4 families with proportional Latin, 3 with ...

fonts.google.com

M PLUS 2 - Google Fonts

M+ FONTS is a little nifty font family for everyday usage. Mplus 2 is a Sans Serif font with nine weights from Thin to B...

fonts.google.com

JKゴシック／JK丸ゴシック

JKゴシックフォントとJK丸ゴシックフォントは、どちらも「女子高生が書いたような文字」をイメージして作られた日本語フォントです。それぞれ以下のような特徴があります。

JKゴシックフォント

• 手書き風の丸みを帯びたフォルムで、親しみやすく優しい印象を与えます。
• 線の太さは比較的均一で、読みやすさも確保されています。
• ひらがな・カタカナに独自のデザインが施されており、特に「る」や「き」などの曲線が特徴的です。
• 漢字はオープンソースの「M+フォント」を採用しており、可読性が高いです。

JK丸ゴシックフォント

• JKゴシックフォントをさらに丸く加工したフォントで、より可愛らしい印象を与えます。
• 特に、文字の端や角に丸みが強調されており、柔らかい雰囲気を演出します。
• ひらがな・カタカナのデザインはJKゴシックフォントと共通していますが、丸みを帯びたことでより幼い印象になっています。
• 漢字はM+フォントを採用しており、可読性が高いです。

フォント情報

ダウンロード先及びライセンスは以下の表を参照ください。

少し太くなった「JKゴシックM」フォントのダウンロード - ふぉんときゅーとがーる。

中太のJKゴシックフォントできました 平仮名・片仮名が女子高生風（？）な可愛いフォントに、新たに「Medium

font.cutegirl.jp

女子高生風 JKゴシック｜いいフォント

JKゴシックフォントとは、女子高生が書いたような文字を意識した可愛らしい丸っこく、こじんまりとしたこぶりな文字が特徴のゴ

goodfreefonts.com

萌え系フォント「JKゴシックM」「JK丸ゴシック」を試してみた！ | 萌え萌えmoebuntu

ubuntuを萌え萌えにするmoebuntuのブログです。

moebuntu.blog.fc2.com

JK丸ゴシック｜いいフォント

JK丸ゴシックとは、「JKゴシック」に少し加工を加え、女子高生文字風を意識した可愛らしい全体的に丸っこく作られている丸ゴ

goodfreefonts.com

ぼくたちのゴシック

ぼくたちのゴシックフォントは、「ぼくたちのゴシック」、「ぼくたちのゴシック２レギュラー」、「ぼくたちのゴシック２ボールド」の3種類のフォントがあります。ぼくたちのゴシックフォントは、丸みを帯びたフォルムで、親しみやすく優しい印象を与えるゴシック体フォントです。

• ぼくたちのゴシック
• ぼくたちのゴシック２レギュラー
• ぼくたちのゴシック２ボールド

表示例

フォント情報

ダウンロード先及びライセンスは以下の表を参照ください。

ぼくたちのゴシック｜いいフォント

ぼくたちのゴシックフォントは、丸みがあるフォルムで親しみやすいゴシック体フォントです。 ひらがな・カタカナが丸みを帯びて

goodfreefonts.com

ぼくたちのゴシック2レギュラー - 無料で使える日本語フォント投稿サイト｜フォントフリー

fontopoさんの人気の「ぼくたちのゴシック」シリーズです。以前からある「ぼくたちのゴシック」からリニューアルしたもので、丸みの感じやハネをやわらかくしたそうです。「ぼくたちのゴシック」シリーズは、可愛いのに読みやすくかつ漢字まで収録され...

fontfree.me

アイシングソーダ

【エモかわいい】の方角を目指したフォントで、インク溜まりの見える、ボールペンでざっと書いた雰囲気を持たせていて、癖のある丸さでかわいさを残しつつも、現代の若さ、青さに宿るエモーショナルを打ち出しています。
一文字ずつ手書きしており、直打ちでも手書き感が出るよう配慮して制作しているとの事です。

漢字は、JIS第1水準漢字、JIS第2水準漢字の一部を収録しています。

尚、このフォントには【 フリー版 / 投げ銭版 / 商用版 】の3種類あります。

また、フォントの太さには、通常と太めの２種類があります。

• アイシングソーダ（通常）
• アイシングソーダ濃（太め）

表示例

フォント情報

ダウンロード先及びライセンスは以下の表を参照ください。

【フリーフォント配布】アイシングソーダ

【エモかわいい】の方角を目指したフォントです。インク溜まりの見える、ボールペンでざっと書いた雰囲気を持たせています。癖のある丸さでかわいさを残しつつも、現代の若さ、青さに宿るエモーショナルを打ち出しました。

berrymilksugar.com

【フリーフォント版】アイシングソーダ2.03 - berry milk sugar - BOOTH

こちらのフリー版は【 商用利用禁止 】です。 商用でのご使用には商用版ライセンスをご購入ください。 DL前に必ず下記URL先より利用規約のご確認をお願いいたします。 －－－－－－－－－－－－－－－－ ＊ 24.04.10　ver.2.03に...

booth.pm

チェックポイント（リベンジ）

チェックポイント★リベンジフォントは、独特の極太の太さのバランスをもち、文字の線の太さのバランスなどできるだけ統一された少しポップでユニークなフォントです。

漢字は、JIS第一/第二水準6,355字＋IBM拡張文字＋日本漢字能力検定1級配当漢字（一部を除く）＋α　計：約6,900字を収録しています。

フォント情報

ダウンロード先及びライセンスは以下の表を参照ください。

チェックポイント★リベンジ｜いいフォント

チェックポイント★リベンジフォントは、独特の極太の太さのバランスをもち、文字の線の太さのバランスなどできるだけ統一された

goodfreefonts.com

よく飛ばない鳥　クイズフォントのページ

yokutobanaitori.web.fc2.com

フォント情報のまとめ

ご紹介したフォントの情報をまとめました。HPからの情報をもとに作成していますが、不十分な情報、間違った情報みあるかと思いますので、正確・詳細な情報はHPをご確認ください。

OTF TTF 変換

上記で、紹介したフォントの中にはOTF（OpenTypeフォント）で公開されているフォントもあります。

OpenTypeフォントはマイクロソフトとアドビシステムズが共同で開発したフォントフォーマットです。

以下のWEBアプリで、TTFフォントに変換する事ができます。

OTF TTF 変換 オンライン - AnyConv

AnyConvは、5つ星のOTFからTTFへの変換ツールです ⭐ 数秒でオンラインでotfファイルをttfに変換します 👍 ソフトウェアのインストールは不要です ✌ 絶対に無料です 🔅 完全に安全。

anyconv.com

OTF→TTF変換

OTF→TTF変換は、OTF形式のフォントファイルをTTF形式のフォントファイルに変換できるツールを提供しているサイトです。OTF形式のフォントファイルをアップロードするだけで、インストール不要・オンライン上でTTF形式のフォントファイルへ...

www.luft.co.jp

OTFフォントを参考URL

以下、OTFフォントの参考URLです。

Just a moment...

mp-support.morisawa.co.jp

TrueTypeフォントとOpenTypeフォントの違いを教えて下さい。 | フォント・書体の開発及び販売 ｜ ダイナコムウェア株式会社

TrueTypeフォントとOpenTypeフォントの違いについて

www.dynacw.co.jp

OpenFontRenderライブラリ

OpenFontRenderライブラリは、M5StackやESP32などのマイコンで、TTFフォントを簡単に表示できるライブラリです。FreeTypeライブラリを使用して、レンダリングを行っています。

従来、マイコンでTTFフォントを表示するには、フォントファイルを独自の形式に変換する必要がありました。しかし、OpenFontRenderライブラリを使用すれば、フォントファイルをそのまま使用することができます。TTFフォントなので、1つのフォントファイルで複数のフォントサイズでの表示が可能です。

以下に、OpenFontRenderライブラリの概要と基本的な使用方法を説明します。

使用方法

このライブラリは、以下の方法でTTFフォントを表示することができます。

1. SDカードからフォントを読み込む
2. SPIFFSからフォントを読み込む
3. プログラム内にフォントを埋め込む

描画速度は、 3 > 1 > 2　で、プログラムに組み込めるサイズであれば、プログラムに組み込んで使用する場合が最も速く描画できます。SPIFFSが最も遅く、実使用は難しいのではといったレベルです。

プログラムに組み込んで使用する場合、フラッシュメモリが16MB以上のESP32を選択してください。

尚、フォントサイズが大きくて、プログラムに組み込めない場合は、SDカードを使用をお勧めします。　

主な機能

以下、ライブラリの主な機能です。

• TrueTypeフォントのサポート
  • TTFファイルを直接読み込み、描画できます。
• 高品質なレンダリング
  • アンチエイリアス処理により、滑らかなテキスト表示が可能です。
• 日本語を含む多言語サポート
  • UTF-8エンコードのテキストをレンダリングできます。

利点

以下、ライブラリの利点です。

• フォントファイルをそのまま使用できる
• メモリ容量が少ないマイコンでも使用できる
• フォントの表示を簡単に行うことができる
• 独自のフォント形式を追加できる

注意点

OpenFontRenderライブラリを使用する際の注意点は以下の通りです。

• 使用するフォントによっては、M5Stack, ESP32 のメモリ容量によっては使用できない場合があります。
• 圧縮したフォントファイルをプログラム内に埋め込む場合は、プログラムサイズが大きくなります。

OpenFontRenderライブラリのSample

OpenFontRenderライブラリは、PlatformIOのLibrariesからはインストールできませんので、ここからダウンロードしてPlatformIOで作成したプロジェクト内のLIBフォルダの下に解凍したファイルをコピーします。

「プロジェクト名\lib\OpenFontRender-master\examples\」に、OpenFontRenderライブラリのSampleコードが入っています。

examplesフォルダ

examplesフォルダには、”M5Stack”、”TFT_eSPI”、”WioTerminal”の3つのフォルダがあります。

M5Stackフォルダ

M5Stackフォルダには、以下の6個のサンプルがあります。

サンプルコード

以下は、”M5Stackフォルダ”内の”load_from_binary”、”load_from_sd”、”load_from_spiffs”の3個のサンプルを条件コンパイルできるようにしたサンプルコードです。

#include <Arduino.h>
#include <M5Unified.h>

// #define USE_binaryttf_h
#define USE_SPIFFS

#ifdef USE_binaryttf_h

	#include "Uemaru-Regular.h"
	// #include "MotoyaLMaru.h"
	// #include "Kosugi-Regular.h"
	// #include "KosugiMaru-Regular.h"
	// #include "SawarabiGothic-Regular.h"
	// #include "SawarabiMincho-Regular.h"

	#include "OpenFontRender.h" // Include after M5Unified.h
#else

	#include <SD.h>
	#include "OpenFontRender.h" // Include after M5Unified.h

  #ifdef USE_SPIFFS
	#include "ofrfs/M5Stack_SPIFFS_Preset.h" // Use preset
  #else
	#include "ofrfs/M5Stack_SD_Preset.h" // Use preset
  #endif
#endif

OpenFontRender render;

void setup()
{
	// put your setup code here, to run once:
	auto cfg = M5.config();
	M5.begin(cfg);
	M5.Display.fillScreen(TFT_BLACK);

#ifdef USE_binaryttf_h
	render.setSerial(Serial);	  // Need to print render library message
	render.showFreeTypeVersion(); // print FreeType version
	render.showCredit();		  // print FTL credit

	if (render.loadFont(binaryttf, sizeof(binaryttf)))
	{
		Serial.println("Render initialize error");
		return;
	}
#else
  #ifdef USE_SPIFFS
	SPIFFS.begin();

	render.setSerial(Serial);	  // Need to print render library message
	render.showFreeTypeVersion(); // print FreeType version
	render.showCredit();		  // print FTL credit

	if (render.loadFont("/SawarabiMincho-Regular.ttf"))
	// if (render.loadFont("/Uemaru-Regular.ttf"))
	{
		Serial.println("Render initialize error");
		return;
	}
  #else
	SD.begin(GPIO_NUM_4, SPI, 40000000);

	render.setSerial(Serial);	  // Need to print render library message
	render.showFreeTypeVersion(); // print FreeType version
	render.showCredit();		  // print FTL credit

	// if (render.loadFont("/ttf/JKG-M_3.ttf"))
	if (render.loadFont("/ttf/Uemaru-Regular.ttf"))
	{
		Serial.println("Render initialize error");
		return;
	}
  #endif
#endif

	render.setDrawer(M5.Display); // Set drawer object

	unsigned long t_start = millis();

	render.setFontColor(TFT_WHITE);
	render.printf("Hello World\n");
	render.seekCursor(0, 10);

	render.setFontSize(30);
	render.setFontColor(TFT_GREEN);
	render.printf("完全なUnicodeサポート\n");
	render.seekCursor(0, 10);

	render.setFontSize(40);
	render.setFontColor(TFT_ORANGE);
	render.printf("こんにちは世界\n");

	unsigned long t_end = millis();
	Serial.printf("Time: %ld ms\n", t_end - t_start);
}

char fn[100];

void loop()
{
	// put your main code here, to run repeatedly:
	M5.delay(1);
	M5.update();  
}

• 実行後の画面表示

プログラムに組み込む

TTFフォントをプログラムに組み込むには、 ttf2bin.py を使用して使用したいTTFフォントを binary TTF font file に変換する必要があります。 ttf2bin.py をpythonが必要です。

#define定義は、以下のように設定します。

#define USE_binaryttf_h
// #define USE_SPIFFS

ttf2bin.py を使用してTTFフォントファイルをヘッダファイルに変換する

コマンドプロンプトで、ttf2bin.py にTTFフォントファイルのファイル名を引数として渡して実行すると、binaryttf.h というヘッダファイルに変換されます。適当な名前に変換して、ソースコードにインクルードして使用します。

 ttf2bin.py TTFファイル名.ttf

ソースファイルにインクルードする

OpenFontRender.h、とともにインクルードします。以下では、名前を変更した”Uemaru-Regular.h“をインクルードしています。

OpenFontRender 用の変数を定義します。（OpenFontRender render;）

#include "Uemaru-Regular.h"
#include "OpenFontRender.h" // Include after M5Unified.h

OpenFontRender render;

フォントをロードする

render.loadFontで、フォントをメモリにロードします。

	if (render.loadFont(binaryttf, sizeof(binaryttf)))
	{
		Serial.println("Render initialize error");
		return;
	}

日本語の表示

render.printfで、日本語を表示できます。

render.setFontColorで、色の指定、render.setFontSizeで、フォントサイズを指定できます。

	render.setFontColor(TFT_WHITE);
	render.printf("Hello World\n");
	render.seekCursor(0, 10);

	render.setFontSize(30);
	render.setFontColor(TFT_GREEN);
	render.printf("完全なUnicodeサポート\n");
	render.seekCursor(0, 10);

	render.setFontSize(40);
	render.setFontColor(TFT_ORANGE);
	render.printf("こんにちは世界\n");

SDカードからフォントファイルを読み出す

SDカードに使用するTTFフォントファイルをコピーし、そのフォントファイルを読み出し、使用します。

#define定義は、以下のように設定します。

// #define USE_binaryttf_h
// #define USE_SPIFFS

ヘッダファイルのインクルード

#include <SD.h>
#include "OpenFontRender.h" // Include after M5Unified.h
#include "ofrfs/M5Stack_SD_Preset.h" // Use preset

OpenFontRender の変数定義

OpenFontRender の変数を定義します。

OpenFontRender render;

フォントをロードする

render.loadFontで、SDカードからフォントファイルをロードします。以下のコードでは、ttfフォルダ内にある、フォントファイル”Uemaru-Regular.ttf”を読み出しています。

	if (render.loadFont("/ttf/Uemaru-Regular.ttf"))
	{
		Serial.println("Render initialize error");
		return;
	}

日本語の表示

文字の表示部分は、上述のした内容となっていて、共通コードとなっています。」

SPIFFSからフォントファイルを読み出す

SPIFFSのルートフォルダにコピーしたTTFフォントファイルを読み出し、使用します。

SPIFFSへのフォントデータの書込

プロジェクトに「data」フォルダを追加し、この中に使用したいフォントファイルをコピーします。SPIFFSみは大きなサイズのフォントファイルは入りませんので注意してください。

PlayformIOのメニューの「Upload Filesystem image」で書き込みます。

#define定義

#define定義は、以下のように設定します。

// #define USE_binaryttf_h
#define USE_SPIFFS

ヘッダファイルのインクルード

#include <SD.h>
#include "OpenFontRender.h" // Include after M5Unified.h
#include "ofrfs/M5Stack_SPIFFS_Preset.h" // Use preset

OpenFontRender の変数定義

OpenFontRender の変数を定義します。

OpenFontRender render;

フォントをロードする

render.loadFontで、SDカードからフォントファイルをロードします。以下のコードでは、ttfフォルダ内にある、フォントファイル”Uemaru-Regular.ttf”を読み出しています。

	if (render.loadFont("/ttf/Uemaru-Regular.ttf"))
	{
		Serial.println("Render initialize error");
		return;
	}

日本語の表示

文字の表示部分は、上述のした内容となっていて、共通コードとなっています。」

TTFフォントを変換したヘッダファイルのサンプル

srcフォルダには、以下のフォントをttf2bin.py を使用してヘッダファイルに変換したファイルがあります。それぞれ、以下のライセンスとなっています。

プロジェクトのソースコード

ここで紹介したプロジェクトのソースコードは、以下のリンクからダウンロードできます。また、上記で紹介したTTFフォントもいくつか含まれています。ライセンスについては、この記事および解凍後のファイルをご確認ください。

参考URL

以下、参考URLです。

GitHub - takkaO/OpenFontRender: TTF font render support library for microcomputer.

TTF font render support library for microcomputer. - takkaO/OpenFontRender

github.com

M5StackでもTTFフォントが使いたい - Qiita

追記（2021/08/18）M5Stack 以外のマイコンにも対応した OpenFontRender をリリースしました。今後はこちらの利用を推奨します。使い方はほとんど同じです。はじめに皆…

qiita.com

GitHub - takkaO/M5FontRender: TTF font render library for M5Stack with Arduino IDE.

TTF font render library for M5Stack with Arduino IDE. - takkaO/M5FontRender

github.com

The FreeType Project

The FreeType Project: a free, high-quality and portable Font engine

freetype.org

いいフォント｜無料の日本語フリーフォント検索サイト

日本語フリーフォントを一覧で検索・ダウンロードすることができるフリーフォントリンク集サイト「いいフォント」。ゴシック体、明朝体、手書き文字、デザイン書体などのカテゴリーから探せます。

goodfreefonts.com

Google Fonts + Japanese • Google Fonts + 日本語

As Google makes progress on supporting Japanese web typography, we invite designers and developers to experiment with th...

googlefonts.github.io

https://www.apache.org/licenses/LICENSE-2.0

www.apache.org

SIL Open Font License

The website of the SIL Open Font License

openfontlicense.org