Comment éviter les changements de police dans les animations exportées
Le titre tient sur deux lignes dans l’aperçu et sur trois dans l’export. Le nom de police n’a pas changé dans la source. Le texte non plus.
C’est possible parce qu’une déclaration de police est une demande, pas la preuve de ce qui a été rendu. Ce décalage peut provoquer une substitution : l’aperçu utilise une police installée localement, tandis que le moteur de rendu ne la trouve pas et choisit un remplacement. Il peut capturer ce remplacement avant la fin du chargement de la police voulue. La famille demandée peut aussi exister sans contenir la graisse ou les caractères linguistiques nécessaires.
Les problèmes typographiques sont particulièrement perturbants en animation, car la mise en page et le temps sont liés. Un autre retour à la ligne peut déplacer une entrée, couvrir une capture ou rendre un sous-titre trop long pour son maintien. La tâche dépasse donc le choix de la bonne famille dans un éditeur. La police voulue doit être disponible, sélectionnée, mesurée et prête au moment du rendu de chaque image.
Déterminer si l’export présente une substitution de police ou un changement de mise en page
Comparez la même image de l’aperçu et de l’export final. La famille diffère-t-elle, la graisse, l’espacement ou seulement le retour à la ligne ? Ces symptômes se recoupent, mais suggèrent des points de départ différents.
Des lettres de forme entièrement différente orientent vers une substitution ou une mauvaise famille. Des formes semblables avec des traits plus épais peuvent indiquer un gras synthétique ou un mauvais fichier de graisse. La même police avec un nouveau retour à la ligne peut signaler d’autres dimensions de bloc, métriques ou un mauvais moment de mesure. Quelques caractères modifiés alors que le reste est correct peuvent indiquer une couverture de glyphes insuffisante.
Choisissez une chaîne de diagnostic contenant les caractères importants du projet. Pour une animation d’offre, elle peut inclure un symbole monétaire, un séparateur décimal, une barre oblique, des chiffres et la véritable formule de facturation. Un simple test « Hello world » peut réussir tandis que la véritable ligne tarifaire utilise encore un remplacement pour un symbole.
Inspectez aussi le texte source. Guillemets courbes, espaces insécables, espaces fines et différents tirets peuvent changer la largeur. Deux chaînes qui semblent similaires dans une messagerie ne sont pas forcément identiques. Vérifiez le contenu exact avant d’accuser le moteur de rendu.
Ne jugez pas la famille uniquement à sa déclaration CSS. Une valeur calculée de font-family peut encore lister une police préférée qui n’a pas fourni les glyphes. Combinez état de chargement, ressources de police réelles et comparaison visuelle. Chacun répond à une partie différente du problème.
Intégrer les fichiers de police au projet
Une police installée sur votre ordinateur est une dépendance d’environnement. Si le rendu s’effectue sur une autre machine ou dans un navigateur isolé, elle peut manquer. Intégrez au projet un fichier de police autorisé ou utilisez une méthode de chargement documentée accessible à l’environnement de rendu.
Notez la famille, le style, la graisse et le fichier utilisés. « Police de marque » ne suffit pas lorsque le design dépend d’une graisse médium et d’une largeur condensée particulières. Les polices variables peuvent aussi proposer d’autres axes que la graisse. Si ces réglages comptent pour le design approuvé, préservez-les explicitement plutôt que de supposer que les valeurs par défaut correspondront.
Vérifiez la licence avant de redistribuer une police. La solution à une ressource manquante n’est pas de copier toutes les polices installées dans une archive de livraison. Si le destinataire doit obtenir une licence distincte, documentez l’exigence et indiquez un moyen légitime de l’acquérir. Un remplacement temporaire peut être utile en revue, mais ne doit pas devenir discrètement le traitement final de marque.
Préférez un chemin de ressource stable à une URL dépendant d’une session. Une police hébergée derrière un lien expirant peut fonctionner dans l’aperçu actuel et échouer au rendu de demain. Un projet reproductible ne doit pas dépendre du cache de votre navigateur ou d’un onglet connecté.
Pour une animation rendue sur le web, définissez la famille de manière cohérente. Une différence entre la famille déclarée dans @font-face et celle demandée par un calque peut forcer une substitution même si le fichier a été téléchargé. Une réponse réseau réussie prouve la récupération, pas la sélection.
Attendre que les polices soient prêtes avant la mesure ou le rendu
Le chargement des polices est asynchrone dans un navigateur. Si la mise en page est mesurée avant que la police voulue soit prête, le projet peut calculer les positions à partir des métriques du remplacement. La bonne police peut alors apparaître tandis que les mesures précédentes restent fausses.
La documentation des polices de Remotion donne un exemple concret d’intégration du chargement au processus de rendu. Elle décrit le chargement local avec @remotion/fonts, ainsi qu’une approche manuelle FontFace liée à l’attente de rendu. Ses recommandations actuelles insistent aussi sur l’attente avant la mesure du texte dans les projets à plusieurs polices. Documentation des polices de Remotion
Attendez que les polices soient prêtes avant de mesurer le texte et de rendre l’image.
Un délai fixe de deux secondes peut fonctionner avec un cache chaud et échouer sur un réseau plus lent. Il peut aussi perdre du temps une fois la police prête. Préférez une promesse explicite de chargement ou un état de chargement, et traitez l’échec de chargement comme une erreur visible plutôt que de poursuivre silencieusement avec une police de remplacement.
Si le projet mesure la longueur des lignes, les boîtes englobantes ou la hauteur du texte, effectuez ces mesures une fois les polices concernées prêtes. Si la police ou le contenu change, invalidez les anciennes mesures. Une police peut être chargée correctement et produire malgré tout un mauvais export si la composition utilise des données de mise en page périmées.
Examinez l’appel documenté ci-dessous : la famille demandée n’est qu’une partie de son identité. L’appel sélectionne aussi une graisse et un sous-ensemble de caractères. Si le titre suivant utilise une demi-graisse, charger uniquement cette ressource normale le laisse dépendre d’une autre fonte ou d’une synthèse. Si le contenu change de langue, le sous-ensemble latin peut ne plus le couvrir. Construisez la demande de police à partir des styles et systèmes d’écriture réellement utilisés par la composition, puis mesurez le texte obtenu avant de positionner les éléments voisins.
Associer les graisses et styles à de véritables ressources
Déclarer font-weight: 600 ne signifie pas nécessairement qu’une véritable demi-graisse est disponible. Le navigateur peut synthétiser une apparence plus épaisse à partir d’une autre graisse. Le résultat peut être acceptable dans un environnement et différent dans un autre.
Associez chaque graisse et style nécessaires au bon fichier ou à la plage variable prise en charge. Si le design emploie normal, médium et demi-gras, vérifiez les trois. Ne testez pas seulement le titre lorsque les petits libellés utilisent une graisse non fournie.
L’italique mérite sa propre vérification. Une simulation inclinée et un véritable dessin italique peuvent présenter des largeurs et formes différentes. Si un mot mis en valeur dirige la composition, cette différence peut affecter la fidélité à la marque et la mise en page.
Pour les polices variables, vérifiez les axes réellement utilisés par le design. Un réglage de graisse seul ne reproduit pas forcément une largeur plus étroite ou un traitement de taille optique. Gardez la configuration compréhensible pour le prochain monteur, surtout si le projet doit être localisé ou adapté à un autre format d’image.
Évitez de compenser une graisse indisponible en ajustant sans cesse l’espacement des lettres jusqu’à faire tenir une phrase. Cela règle la mise en page pour la mauvaise police. Chargez d’abord la ressource voulue, puis affinez l’espacement dans la véritable police. Sinon, chaque nouvelle valeur de contenu révèle à nouveau le décalage sous-jacent.
Tester la couverture des caractères avec le contenu réel
Une police peut couvrir l’alphabet anglais sans contenir un symbole nécessaire au projet. Elle peut aussi couvrir une langue et recourir à une substitution pour une autre. Un rendu mixte dans une seule ligne peut ressembler à un espacement ou une graisse irréguliers plutôt qu’à une substitution évidente.
Testez les devises et la ponctuation réellement utilisées. Signe dollar, euro, roupie et ponctuation pleine chasse représentent des besoins de glyphes distincts. Le formatage numérique peut aussi introduire des caractères, comme une espace insécable, absents de l’exemple anglais d’origine.
Pour la localisation, choisissez délibérément les polices de remplacement au lieu d’accepter celles qui se trouvent sur la machine de rendu. Le remplacement doit couvrir la langue et convenir aux besoins visuels et spatiaux de la composition. Cela n’exige pas de faire ressembler tous les systèmes d’écriture à la typographie latine ; cela exige un choix conscient.
Vérifiez la mise en forme des écritures autant que les caractères isolés. Certaines écritures reposent sur des formes contextuelles et une composition complexe. Un aperçu contenant un seul caractère ne prouve pas qu’une phrase complète sera rendue correctement. Utilisez des lignes représentatives complètes dans le véritable environnement de rendu.
Ne corrigez pas les glyphes manquants en transformant seulement les caractères gênants en fragments d’images disparates, sauf si c’est une décision de design explicite. Le résultat peut nuire à l’alignement sur la ligne de base, à l’accessibilité d’une source interactive et aux modifications futures. Corrigez la ressource ou choisissez un traitement typographique adapté au niveau de la composition.
Traiter les retours à la ligne comme un résultat à vérifier
Même lorsque la police voulue se charge, le retour à la ligne peut changer si le bloc de texte, l’échelle ou l’environnement de rendu diffèrent. Définissez clairement les dimensions de composition et la zone de texte. Évitez de laisser la taille temporaire d’un panneau d’aperçu définir la mise en page finale.
Pour un titre de campagne court, un retour volontaire peut préserver le rythme de lecture choisi. Il doit appartenir au modèle de contenu ou de mise en page, et non être un saut accidentel inséré dans un seul parcours d’export. Pour un texte plus long ou localisé, un retour fixe peut devenir inadapté ; le design doit prévoir une stratégie de recomposition.
Vérifiez le comportement avec le contenu le plus long prévu. Un projet qui accueille « US$29 » peut échouer avec « US$129 » ou une formule de facturation traduite. Inutile de tester toutes les chaînes possibles, mais testez les extrêmes réalistes que le projet transmis doit prendre en charge.
Un ensemble de test utile comprend le texte approuvé, un nombre plus long, un libellé plus long et une variante linguistique pertinente si la localisation est prévue. Inspectez la même scène avec chacun. Notez les changements qui demandent un rééquilibrage de la mise en page au lieu de promettre une souplesse illimitée du contenu.
Ne réduisez pas automatiquement le corps jusqu’à tout faire tenir. Le texte peut techniquement rester dans son bloc tout en devenant illisible à destination. Envisagez une deuxième ligne, une zone plus large, une formulation plus courte préservant le sens ou un autre agencement de scène. Tenir dans l’espace et être lisible sont deux exigences distinctes.
Repérer les différences introduites par le contexte de rendu
Un aperçu peut hériter de ressources dont l’export ne dispose pas. Caches de navigateur, polices système, accès aux feuilles de style distantes et chemins de ressources différents peuvent masquer une dépendance. Testez un export par le véritable parcours de livraison plutôt que de supposer qu’un aperçu d’éditeur correct prouve que tout est prêt.
Si le projet contient du texte SVG ou des documents intégrés, vérifiez leur comportement typographique séparément. Ils peuvent être rendus dans un autre contexte que le texte ordinaire de la page. Une police disponible dans un contexte ne l’est pas automatiquement pour chaque objet intégré. Appuyez-vous sur les possibilités documentées de l’outil de rendu et inspectez l’image obtenue.
Vérifiez aussi le texte matriciel. Si un logo ou un sous-titre a été aplati dans une image, aucun changement de chargement de police ne le modifiera. Un projet mixte peut contenir des titres modifiables et d’anciens libellés matriciels qui ressemblent à une substitution. Identifiez le texte encore rendu comme du texte avant de modifier le système de polices.
Pour diagnostiquer un rendu distant, préservez le message d’erreur et la ressource en échec. « La mauvaise police a été utilisée » est un symptôme. « La requête WOFF2 de demi-graisse a renvoyé une erreur d’autorisation » est une cause sur laquelle agir. Évitez de remplacer plusieurs parties du système typographique en même temps : il serait plus difficile de savoir quelle correction a compté.
Faites passer l’épreuve typographique par chaque parcours d’export utilisé, y compris le rendu cloud et l’export côté client.
Distinguer la fidélité de marque des informations nécessaires
Toutes les lignes n’ont pas le même rôle typographique. Un titre de marque peut dépendre d’une police d’affichage distinctive, tandis qu’une condition juridique ou un libellé de tutoriel demande une large couverture des caractères et une lisibilité fiable. Vous pouvez concevoir un système cohérent avec différents rôles plutôt que d’imposer une police unique à toutes les langues et tailles.
Supposons que la police d’affichage manque d’un symbole monétaire. Remplacer ce symbole par une autre police peut produire une ligne composite maladroite. Les autres solutions comprennent le choix d’une police de texte compatible pour l’énoncé tarifaire complet ou la séparation du titre de marque et de l’offre factuelle. Le bon choix préserve le sens et une hiérarchie délibérée.
Documentez cette décision dans la source. Si le prix utilise intentionnellement une famille de texte, un futur monteur ne doit pas le « corriger » en rétablissant la police d’affichage et le glyphe manquant. Une brève note fondée sur les rôles est plus durable qu’une exception inexpliquée sur un calque.
Il en va de même des petits sous-titres. Une police magnifique en grand titre peut avoir des traits fragiles une fois réduite. Augmenter sa graisse ou passer à la police de texte approuvée peut être une adaptation honnête à l’emplacement. Testez le résultat à la taille réelle de visionnage plutôt que de considérer la constance de famille comme seule mesure de qualité de marque.
Pour un travail multilingue, demandez si la hiérarchie survit aux changements d’écriture. Les formes exactes et les longueurs de lignes différeront. Préservez la relation entre titre, corps et réserve, et ajustez la composition si nécessaire. Copier mécaniquement les espacements latins peut être aussi dommageable qu’une substitution accidentelle.
Un système typographique devient maintenable lorsque ses règles expliquent le rôle de chaque style. Le chargement protège alors un design intentionnel, plutôt que des réglages arbitraires que personne ne sait justifier quand le contenu change.
Rendre l’échec évident plutôt que séduisant
Le remplacement silencieux est pratique sur les pages web ordinaires, car le contenu reste lisible. Dans un export vidéo de marque, il peut produire un fichier soigné mais incorrect. Envisagez de faire échouer le rendu ou d’afficher un diagnostic clair dans l’environnement de travail lorsqu’une police requise ne se charge pas.
Cela ne signifie pas que chaque échec de police décorative doive bloquer chaque brouillon. Vous pouvez distinguer un remplacement de brouillon d’une exigence de sortie finale. L’essentiel est de rendre le statut visible, afin qu’une substitution temporaire ne soit pas approuvée par accident.
Gardez une petite épreuve typographique avec le projet : véritable titre, prix, libellé de corps, ponctuation et échantillon de langue requis. Rendez-la par le même parcours que la vidéo finale lorsque vous changez de polices ou d’environnement. Il est plus rapide d’y repérer une graisse manquante qu’après la revue d’une longue séquence.
Après correction du problème de ressource, revérifiez la composition. Les bonnes métriques peuvent déplacer un texte précédemment positionné autour d’un remplacement. Vérifiez retours à la ligne, alignement, coupures et intervalle de lecture partagé avec les éléments voisins. La police peut être correcte alors que la mise en page reflète encore les anciennes mesures erronées.
Le test final est une correspondance visible : famille voulue, graisses, caractères, retours à la ligne et hiérarchie apparaissent dans le fichier livré. Un nom de police dans la source n’est que le début de cette preuve. Rendre explicites le chargement et la mesure transforme la typographie, d’un hasard dépendant de la machine, en partie maintenable du projet d’animation.