モーショングラフィックスの書き出しでフォントが変わるのを防ぐ方法
プレビューでは2行の見出しが、書き出しでは3行になります。ソースのフォント名は変わっていません。文章も同じです。
フォントの宣言は要求であり、実際に何が描画されたかの証拠ではないため、こうしたことが起きます。不一致によって、フォントの置き換えが生じます。プレビューでは手元に入ったフォントを使えても、レンダラーは見つけられず、代替を選ぶかもしれません。意図したフォントの読み込み前に、代替のまま収録することもあります。指定したファミリーがあっても、必要なウェイトや言語の文字を持たない場合があります。
モーショングラフィックスでは、配置と時間がつながるため、文字の失敗は特に大きく影響します。改行の違いで登場位置が動き、画像を覆い、字幕がホールドに収まらなくなるかもしれません。したがって、エディターで正しいファミリーを選ぶだけの仕事ではありません。各フレームを描画する瞬間に、意図したフォントが利用でき、選択され、計測され、準備できている必要があります。
フォントの置き換えか、レイアウト変更かを特定する
プレビューと最終書き出しの、同じフレームを比べます。ファミリー、太さ、間隔のどれが異なるのか、改行だけなのか。症状は重なりますが、違う出発点を示します。
字形がまったく異なるなら、代替や誤ったファミリーが疑われます。形が似て線が太いなら、合成の太字や、誤ったウェイトのファイルかもしれません。同じフォントで改行が違うなら、枠の寸法、フォントの寸法情報、計測のタイミングかもしれません。一部の文字だけ変わるなら、必要な字形への対応不足かもしれません。
プロジェクトに重要な文字を含む、診断用文字列を選びます。料金のアニメーションなら、通貨記号、小数点の区切り、スラッシュ、数字、実際の請求文が必要かもしれません。単純な「Hello world」は通っても、本当の価格行の一記号だけ代替になる場合があります。
ソースの文字自体も調べます。曲線の引用符、改行しない空白、狭い空白、異なるダッシュは、幅を変えます。チャットで似て見える二つの文字列が、同一とは限りません。レンダラーのせいにする前に、正確な内容を検証します。
CSSの宣言だけでファミリーを判断しないでください。計算済みのfont-family値にも、字形を供給できなかった優先フォントが並ぶことがあります。読み込み状態、実際のフォント資源、視覚的な比較を一緒に使います。それぞれが、問題の違う部分へ答えます。
フォントファイルをプロジェクトの一部にする
デスクトップに入っているフォントは、環境への依存です。別の機器や隔離したブラウザーで動くレンダラーには、ないかもしれません。許可されたファイルを同梱するか、レンダリング環境から使える、文書化された読み込み方法を使います。
使用したファミリー、スタイル、ウェイト、ファイルを記録します。特定のミディアムの太さと狭い幅に依存するデザインでは、「ブランドフォント」だけでは足りません。可変フォントは、太さ以外の軸も持ちます。承認したデザインに重要なら、既定値が合うと思わず、設定を明示して残します。
再配布前にライセンスを確認します。足りない資源の解決は、インストール済みの全フォントを納品アーカイブへコピーすることではありません。別のライセンスが必要なら、要件と正規の取得経路を記します。一時的な代替はレビューに役立ちますが、黙って最終的なブランド表現になるべきではありません。
セッションに依存するURLより、安定した素材パスを選びます。期限付きリンクのフォントは、今のプレビューでは動いても、明日のレンダリングで失敗するかもしれません。再現できるプロジェクトを、ブラウザーキャッシュやログイン中のタブに依存させるべきではありません。
Webで描画するモーションでは、ファミリーを一貫して定義します。@font-faceの宣言と、レイヤーの要求するファミリーが違えば、ダウンロードに成功しても代替になります。正常なネットワーク応答は、取得の証拠であり、選択の証拠ではありません。
計測とレンダリングの前に、準備完了を待つ
ブラウザーのフォント読み込みは非同期です。準備前に配置を計測すると、代替フォントの寸法で位置を計算するかもしれません。その後、正しいフォントが見えていても、以前の計測は誤ったまま残ることがあります。
Remotionのフォントのドキュメントは、読み込みをレンダリングの一部として扱う、具体的な例です。@remotion/fontsによるローカルフォントと、レンダリング待機につなぐ手動のFontFace方式を説明しています。現在の指針は、複数フォントのプロジェクトで、文字の計測前に待つことも強調しています。Remotionのフォントドキュメント
文字を計測し、フレームを描画する前に、フォントの準備完了を待ちます。
固定の2秒待機は、キャッシュ済みなら動いても、遅いネットワークでは失敗するかもしれません。すでに準備が済んだ後の時間も無駄にします。明示的なPromiseや読み込み状態を使い、失敗時は黙って代替で進めず、見えるエラーとして扱います。
行の長さ、境界の枠、文字の高さを計測するなら、関連するフォントの準備後に行います。フォントや内容が変われば、古い計測を無効にします。正しく読み込めていても、古い配置データを使うために、悪い書き出しになる場合があります。
下のドキュメントの呼び出しを詳しく見ると、ファミリーは識別情報の一部にすぎないと分かります。ウェイトと文字のサブセットも選びます。次のタイトルがセミボールドなら、このレギュラーの資源だけでは、別のフェイスか合成に依存します。言語が変われば、Latinサブセットでは足りないかもしれません。実際に使うスタイルと文字体系からフォントを要求し、周囲を配置する前に、結果の文字を計測します。
ウェイトとスタイルを実際の資源に対応付ける
font-weight: 600と宣言しても、本物のセミボールドがあるとは限りません。ブラウザーが別の太さから、太い見た目を合成する場合があります。ある環境では妥当でも、別では異なるかもしれません。
必要なウェイトとスタイルごとに、正しいファイルや対応する可変範囲を割り当てます。レギュラー、ミディアム、セミボールドを使うなら、三つすべてを検証します。小ラベルが未提供の太さを使っているのに、見出しだけ試してはいけません。
イタリックも別に確認します。傾けた合成と、設計されたイタリックでは、文字の幅や形が異なることがあります。強調語が構図を左右するなら、ブランドへの忠実さと配置の両方に影響します。
可変フォントでは、実際に使う軸を検証します。太さだけでは、狭い幅やオプティカルサイズの処理を再現できないかもしれません。特にローカライズや別比率への展開を予定するなら、次の編集者に分かる設定を残します。
ないウェイトを、一文が収まるまで字間を繰り返し調整して直そうとしないでください。違うフォントに合わせた配置になります。先に意図した資源を読み、正しい書体で間隔を整えます。そうしなければ、内容が新しくなるたび、基礎の不一致が現れます。
実際の内容で字形の対応を確かめる
英語のアルファベットがそろうフォントでも、必要な記号がないかもしれません。一つの言語に対応しても、別の言語は代替になる場合があります。一行の中で混ざると、明らかな置き換えではなく、間隔や太さの不一致に見えることもあります。
実際に使う通貨と句読点を試します。ドル、ユーロ、ルピーの記号、全角の句読点は、それぞれ異なる字形の要件です。数値形式によって、元の英語例にはなかった、改行しない空白が入る場合もあります。
ローカライズでは、レンダリング機器にたまたまあるものを受け入れず、代替フォントを意図して選びます。言語に対応し、視覚と空間の必要を満たすものを使います。すべての文字体系をラテン文字に似せることではなく、選択を意識して行うことです。
単独文字だけでなく、シェーピングも確認します。文脈に応じた字形や複雑な配置を必要とする文字体系があります。一文字のフォントプレビューだけでは、一文が正しく描画される証拠にはなりません。実際の描画環境で、完全な代表的な行を使います。
明示した設計判断でなければ、問題の文字だけを無関係な画像の断片にして直さないでください。ベースライン、操作できるソースのアクセシビリティ、将来の編集性を損なう場合があります。資源を直すか、構図全体のレベルで適した文字の処理を選びます。
改行を、確認すべき出力として扱う
意図したフォントが読み込まれても、枠、拡縮、描画環境が異なれば、折り返しが変わることがあります。構図の寸法と文字領域を明確に指定します。最終配置を、プレビューパネルの一時的な大きさに頼らせないでください。
短いキャンペーン見出しなら、意図した改行で読むリズムを保てます。一つの出力経路にだけ入れた偶然の改行ではなく、内容か配置モデルの一部にするべきです。長い文章やローカライズでは、固定改行が不適切になるかもしれず、再配置の方針が必要です。
想定する最長の内容で何が起きるかを確認します。「US$29」に収まるプロジェクトも、「US$129」や翻訳した請求文では失敗するかもしれません。全文字列を試す必要はありませんが、引き継ぎで対応を期待する、現実的な端の例は試すべきです。
有用なテストには、承認済みの文章、長い数値、長いラベル、ローカライズが範囲内なら関連する言語版が含まれます。それぞれで同じシーンを確認します。無制限の内容の柔軟性を約束せず、配置の再調整が必要な変更を記録します。
収まるまで自動で文字を縮めないでください。枠には技術的に残っても、配信先で読めなくなるかもしれません。二行、広い領域、意味を保った短い文言、別のシーン配置を検討します。収まりと読みやすさは、別の要件です。
レンダリング環境から入る違いを探す
プレビューは、書き出し処理にはない資源を引き継ぐことがあります。ブラウザーのキャッシュ、システムフォント、リモートのスタイルシートへのアクセス、異なる資源パスが、依存を隠す場合があります。正しい編集プレビューで準備完了とせず、実際の納品経路で書き出します。
SVGの文字や埋め込み文書があるなら、別に確認します。普通のページ文字とは違う環境で描画されるかもしれません。一つの環境で使えるフォントが、すべての埋め込み要素にも使えるとは限りません。ツールの文書化された対応を使い、結果のフレームを調べます。
ラスター化済みの文字も確認します。ロゴや字幕が画像に統合されていれば、フォント読み込みを変えても変わりません。編集可能な見出しと、古い画像内ラベルが混じると、フォントの置き換えに見える場合があります。仕組みを変える前に、どの文字がまだ編集可能かを特定します。
リモートのレンダリングを診断するときは、エラーメッセージと、失敗した資源を残します。「違うフォントを使った」は症状です。「セミボールドのWOFF2要求が権限エラーを返した」は、対処できる原因です。複数の仕組みを一度に交換すると、どの訂正が効いたか分かりにくくなるので、避けます。
クラウドレンダリングとクライアント側書き出しを含め、使う各出力経路で、フォントの確認用サンプルをレンダリングします。
ブランドへの忠実さと必要な情報を分ける
すべての行が、同じ文字の役割を持つわけではありません。ブランドの見出しには特徴的なディスプレー書体が必要でも、法的な条件や操作ラベルには、広い文字対応と確かな読みやすさが必要です。一つのフォントに全言語と全サイズを解かせず、異なる役割で一貫した仕組みを作れます。
ディスプレー書体に通貨記号がないとします。記号だけを代替で補うと、不自然に混ざった行になるかもしれません。価格文全体を対応する本文書体にする、ブランドの見出しと事実の料金を分ける、といった選択があります。正しい選択は、意味と意図した階層の両方を保ちます。
判断をソースに記します。価格に意図して本文用ファミリーを使うなら、後の編集者がディスプレー書体へ「直し」、欠ける記号を再発させるべきではありません。一レイヤーの理由不明な例外より、役割に基づく短いメモの方が長く使えます。
小さな字幕も同じです。見出しでは美しいフォントも、縮めると線が弱いかもしれません。ウェイトを増やす、承認された本文書体へ変えることは、掲載先への誠実な適応になります。同じファミリーだけをブランド品質の基準にせず、実際の視聴サイズで試します。
多言語では、文字体系を越えて階層を保てるかを問います。形や行の長さは異なります。見出し、本文、条件の関係を保ち、必要なら構図を調整します。ラテン文字の間隔値を機械的にコピーすることは、偶然の代替と同じくらい害になる場合があります。
各スタイルの仕事をルールが説明するとき、文字の仕組みは保守できるものになります。フォント読み込みは、内容が変わると誰も理由を説明できない任意の設定を保つのではなく、意図したデザインを守ります。
魅力的な失敗ではなく、明らかな失敗にする
通常のWebページでは、黙った代替でも内容を読めるので便利です。しかしブランド動画では、洗練して見えても間違ったファイルを作る場合があります。必要なフォントが読めないときは、レンダリングを失敗させるか、作業環境で明確な診断を表示することを検討します。
すべての装飾フォントの失敗で、すべての初稿を止めるという意味ではありません。初稿用の代替と、最終出力の要件は分けられます。重要なのは状態を見せ、一時的な置き換えが偶然、承認を得ないことです。
実際の見出し、価格、本文ラベル、句読点、必要な言語サンプルを含む、小さな文字の確認用素材を保ちます。フォントや環境を変えるとき、最終動画と同じ経路で描画します。長い流れの後で見つけるより、そこで足りないウェイトを捉える方が速く済みます。
資源の問題を直した後は、構図を再確認します。正しい寸法で、以前は代替に合わせた文字が動くことがあります。改行、配置、見切れ、近隣要素と一緒に読める共通区間を検証します。フォントが正しくても、配置には以前の誤った計測が残る場合があります。
最終テストは、目に見える対応です。意図したファミリー、ウェイト、文字、改行、階層が、納品ファイルに出ていること。ソース内の名前は、証明の始まりにすぎません。読み込みと計測を明示すると、文字組みは、機器次第の偶然から、保守できるプロジェクトの一部へ変わります。