Tu veux utiliser une police personnalisée sur ton site Framer, mais tu ne trouves pas le bouton d'import ?

Normal. Framer a changé sa méthode. L'import ne se fait plus depuis le design. Il se fait depuis le workspace.

Ce guide t'explique exactement comment faire, étape par étape.

Ce qui a changé dans la gestion des polices sur Framer

Depuis une mise à jour récente, Framer a modifié la façon d'importer des polices personnalisées.

Avant, tu pouvais importer directement depuis un projet.
Aujourd'hui, ce n'est plus possible.

👉 Toutes les polices doivent être ajoutées au niveau du workspace.

Une fois importées dans le workspace, elles deviennent disponibles dans tous les projets liés à cet espace de travail. Tu les retrouves dans le sélecteur de police, sous la catégorie "Custom".

Ça change quoi concrètement ?

• Plus de doublons entre projets
• Une seule source de vérité pour la typographie
• Meilleure cohérence visuelle si tu travailles sur plusieurs sites
• Plus simple pour le travail en équipe

Le bouton "Custom" dans le sélecteur de police renvoie maintenant vers le font manager du workspace. C'est normal.

Quels formats de police sont acceptés sur Framer

Framer accepte plusieurs formats : .woff2 (recommandé), .woff, .ttf, .otf. Les quatre fonctionnent. Mais tous ne se valent pas en performance.

👉 Privilégie le format woff2. Il est plus léger, mieux compressé et chargera plus vite sur ton site. C'est le standard recommandé pour le web.

Préparer tes fichiers de police avant l'import

Avant d'aller dans Framer, vérifie quelques points :

• Un fichier = une graisse. Si tu veux Regular, Medium et Bold, tu auras trois fichiers distincts.
• Nomme tes fichiers clairement. Par exemple : Satoshi-Regular.woff2, Satoshi-Bold.woff2. Ça t'évitera la confusion dans le font manager.
• Vérifie la licence. Certaines polices sont gratuites pour le desktop mais pas pour le web. Vérifie que ta licence autorise l'utilisation web avant de publier.

Où trouver des polices gratuites compatibles web ?

• Google Fonts (gratuit, toutes compatibles web)
• Fontshare (gratuit, grande qualité)
• DaFont (vérifier les licences au cas par cas)

Si tu utilises déjà une Google Font, tu n'as pas besoin de l'importer. Framer les intègre nativement. Tape simplement le nom dans le sélecteur de police.

Importer une police dans le workspace Framer

C'est la seule méthode qui fonctionne aujourd'hui.

Étape 1 : Accéder aux paramètres du workspace

Ouvre ton Dashboard Framer (pas un projet, le dashboard).
En bas à gauche, clique sur les Workspace Settings.

Étape 2 : Ouvrir la section Fonts et importer

Dans les paramètres, va dans la section Fonts.
Tu verras la liste des polices déjà importées dans ton workspace.

Clique sur Upload pour ajouter une nouvelle police.
Sélectionne tes fichiers .woff ou .woff2. de préférence.

Framer les traite en quelques secondes. Une fois l'import terminé, la police est immédiatement disponible dans tous tes projets.

Étape 3 : Vérifier dans un projet

Ouvre n'importe quel projet de ton workspace.
Sélectionne un texte.
Dans le panneau droit, ouvre le sélecteur de police.

Ta police apparaît dans la catégorie Custom.

Aucune importation supplémentaire n'est nécessaire dans le projet. Si la police est dans le workspace, elle est accessible partout.

Créer des styles de texte avec ta police

Importer la police ne suffit pas. Pour que ton site reste cohérent, tu dois créer des styles de texte.

Un style de texte, c'est une configuration enregistrée : police, taille, graisse, interligne, couleur. Tu le définis une fois, et tu l'appliques partout.

Pourquoi c'est important ?

• Tu modifies la taille de tous tes H2 en un clic
• Tu gardes une cohérence typographique sur tout le site
• Tu gagnes un temps considérable sur les modifications futures

Pour créer un style de texte dans Framer :

1. Sélectionne un texte déjà stylisé comme tu le souhaites

2. Dans le panneau gauche, clique sur "Assets"

3. Clique sur "+" dans "Styles"

4. Nomme-le clairement : "Heading 1", "Body", "Button", etc.

En général, tu as besoin de 4 à 6 styles de texte pour un site complet :

• Heading 1 (titre principal)
• Heading 2 (sous-titres de section)
• Heading 3 (sous-sous-titres)
• Body (paragraphes)
• Button (texte des boutons)
• Caption (petits textes, labels)

Les styles de texte sont aussi essentiels pour le SEO de ton site Framer. Google analyse la hiérarchie H1, H2, H3 pour comprendre la structure de ta page.

Bonnes pratiques typographiques pour un site Framer

Ne charge pas trop de polices

Chaque police ajoutée augmente le temps de chargement de ton site.

La règle : 2 familles de polices maximum par site. Une pour les titres, une pour le corps de texte. Beaucoup de sites performants n'en utilisent qu'une seule.

N'importe que les graisses nécessaires

Tu n'as pas besoin de Regular, Medium, Semi-Bold, Bold et Extra-Bold.

Dans la majorité des cas, Regular + Bold suffisent. Si tu veux un peu plus de nuance, ajoute Medium. Trois graisses, c'est le maximum recommandé.

Teste le rendu sur mobile

Une police qui rend bien en 18px sur desktop peut être illisible en 14px sur mobile. Passe toujours sur le breakpoint téléphone pour vérifier la lisibilité.

Le guide sur le responsive dans Framer explique comment ajuster les tailles par breakpoint.

Vérifie le contraste

Une police fine sur un fond clair est souvent difficile à lire. Assure-toi que le contraste entre le texte et le fond est suffisant. Les graisses Regular et Medium sont généralement plus lisibles que les Light.

Erreurs fréquentes à éviter

Chercher l'import dans le projet. C'est terminé. L'import se fait uniquement dans le workspace. Si tu cherches un bouton "Upload Font" dans l'éditeur de design, tu ne le trouveras pas.

Importer du .ttf ou .otf. Si possible importe du .woff et .woff2. Convertis tes fichiers avant.

Importer toutes les graisses. Chaque fichier ajoute du poids à ton site. N'importe que ce que tu utilises réellement.

Oublier de créer des styles de texte. Sans styles, tu te retrouves à modifier la typo élément par élément. C'est ingérable sur un site de plus de 3 pages.

Ne pas vérifier la licence web. Une police gratuite pour Figma ne l'est pas forcément pour un site publié. Vérifie toujours les conditions d'utilisation.

Résumé

L'import de polices sur Framer se fait en 3 étapes :

1. Prépare tes fichiers en .woff2

2. Importe-les dans le workspace (Workspace Settings → Fonts → Upload)

3. Utilise-les dans tes projets via le sélecteur "Custom"

Crée ensuite des styles de texte pour garder la cohérence sur tout le site.

👉 Si tu veux aller plus loin dans la personnalisation de ton site, le guide complet pour créer un site Framer couvre toutes les étapes de A à Z.