フローとペイウォールビルダーのカスタムフォント
フローを作成する際、アプリの他の部分に合わせてカスタムフォントを使いたい場合があります。ここでは、カスタムフォントを追加してフローで使用する方法を説明します。
1つのアプリ内のすべてのフローは、アップロードしたフォントを共有します。コピーしたフローも同様です。Adapty アカウント内の他のアプリはそれぞれ個別にアップロードが必要です。
フローのデザインを始める前に、Styles パネルでフォントを設定してください。こうすることで、変更がグローバルに適用されます。
組み込みフォント
ビルダーでフローを作成すると、Adapty はデフォルトでシステムフォントを使用します。通常、iOS では SF Pro、Android では Roboto になりますが、端末によって異なる場合があります。Arial、Times New Roman、Courier New、Georgia、Helvetica など、よく使われるフォントも選択できます。これらのフォントにはいくつかのスタイルオプションが用意されています。
これらのフォントは Adapty SDK には含まれておらず、プレビュー目的でのみ使用されます。すべてのデバイスで完全に動作することを保証することはできません。ただし、私たちのテストでは、ほとんどのデバイスで追加の設定なしに認識されています。iOS でデフォルトで利用可能なフォントを確認することもできます。
カスタムフォントを追加する
アップロードするファイルはエディタのプレビュー専用です。Adaptyはそのファイルをユーザーのデバイスに配信しません。デバイス上でフォントを表示するには、アプリのバンドルにファイルを含めてください。含めない場合、SDKはランタイム時にSF Pro(iOS)またはRoboto(Android)にフォールバックします。
システムデフォルト以外のフォントを使用したい場合は、カスタムフォントを追加できます。
カスタムフォントを追加するには:
- フォントのドロップダウンから Upload new font を選択します。
-
Add custom fontウィンドウで、フォントファイルをドラッグ&ドロップするか、Select filesをクリックします。
- サポートされる形式:
.ttfと.otf。 - バリアブルフォント: Adapty はファイル内の各名前付きスタイル(Regular や Bold など)に対して個別のフェイスを作成します。
- 複数の書体を一度にアップロード: すべてのフォントを一括でアップロードできます。Adapty は各ファイルに保存されているファミリー名を読み取り、ファイルをファミリーにグループ化します。たとえば、2 書体の 10 ファイルは、それぞれ 5 フェイスを持つ 2 つのフォントファミリーになります。
- 既存のファミリー: すでにアップロード済みのフォントと同じファミリー名を持つファイルは、新しいフェイスとしてそのフォントに追加されます。
- サポートされる形式:
-
Add fonts をクリックします。Adapty がファイルをアップロードし、フォントファミリーごとに1つのカードを表示します。フォントファミリーの名前を変更するには、名前の横にある鉛筆アイコン をクリックします。
-
必要に応じて、各フォントフェイスのプロパティを設定します:
- Font Family: フォントが属するファミリー — スタイルを別のファミリーに移動できます。
- Font Face: フォントのウェイトとスタイル — アップロード時に自動検出されます。
- iOS font name と Android font name: アプリ内でのフォント名。アプリバンドルに追加した内容と一致させる必要があります。
フォントファイルを Adapty にアップロードすることで、そのフォントをアプリで使用する権利を有していることを確認したものとみなされます。
カスタムフォントを管理する
Edit custom font をクリックして、プロパティ編集画面を開きます。
- ファミリー名を変更するには、Font family name in Builder を編集します。
- 新しいウェイトやスタイルを追加するには、Add font face をクリックします。
- スタイルの iOS または Android のフォント名を修正するには、そのスタイルの行をクリックします。
- スタイルの新しいファイルをアップロードするには、その行をクリックしてから Replace をクリックします。
カスタムフォントを削除する
フォントファミリーまたは単一のフォントフェイスを削除するには、プロパティ編集画面で Delete font family または Delete font face をクリックします。
フローがそのフォントフェイスを使用している場合、Adapty はすぐに削除できません。代わりに、ライブラリから代替フォントを選択するよう求められます。古いフォントフェイスを使用していた要素には、新しいフォントが適用されます。Replace & delete をクリックして操作を確定してください。
フローテンプレートのカスタムフォント
フローテンプレートライブラリには、カスタムフォントを使ったテンプレートが含まれています。テンプレートカードの Custom font チップにカーソルを合わせると、使用しているフォントを確認できます。
Adapty はこれらのフォントをバンドルしていません。チップに表示されているフォント名に合わせて、自分でフォントを用意する必要があります。フォントによっては商用ライセンスが必要な場合があります。
フォントファイルを用意したら、以下のバンドル手順に従ってください。
フォントファイルをアプリのバンドルに追加する
Adapty はカスタムフォントをユーザーのデバイスに送信しないため、フローで使用するすべてのフォントファイルをアプリに含める必要があります。すでにカスタムフォントを使用している場合は同じ方法で追加してください。使用していない場合は、各プラットフォームのガイドを参照してください。
- iOS: カスタムフォントをアプリに追加する
- Android: XML でのフォント
フローはアプリ内の各フォントを名前で検索するため、Adapty に設定する名前はアプリのものと一致している必要があります。名前を確認するには、フォント設定でスタイルを開いてください:
- iOS font name: フォントファイル内に保存されているPostScript名です。iOSはファイル名ではなくこの名前でフォントを識別します。アプリ内のすべてのカスタムフォントの中で一意である必要があります。ファイルにPostScript名が宣言されている場合、Adaptyが自動的に入力します。バリアブルフォントファイルには宣言がないことが多いため、その場合は手動で入力してください。確認するには、Font Book > PostScript名を参照するか、
UIFontAPIを使用してください。 - Android font name:
res/font/内のファイル名から拡張子を除いたものです。小文字、数字、アンダースコアのみ使用できます。Adaptyが自動入力することはありません。1つのバリアブルフォントファイルから作成されたすべてのフェイスはこの名前を共有します。