CodePen est un éditeur Web de code HTML, CSS et JavaScript, grâce auquel vous pouvez tester le code directement dans le navigateur. Vous pouvez utiliser des polices web personnalisées directement dans vos « Pens ».

Choix des polices à utiliser

Suivez les instructions du tutoriel relatif aux polices web pour choisir des polices et créer votre projet web.

Ajout du code incorporé au « Pen »

Vous pouvez ajouter le code incorporé à l’interface utilisateur de CodePen dans le champ « Stuff for <head> » du menu des paramètres de l’éditeur HTML ou du menu « CSS > Ajouter CSS externe ».

Pour rechercher le code incorporé de votre projet, consultez la page Projets web et recherchez le nom du projet. Copiez et collez le code incorporé CSS par défaut de ce projet à l’un de ces emplacements.

Utilisation de CodePen avec le code incorporé CSS par défaut
Utilisation de CodePen en liant directement le fichier CSS

Application des polices dans le code CSS

Vous pouvez maintenant utiliser les noms de famille de polices dans l’éditeur CSS de Pen ; les polices seront immédiatement visibles en mode Live View.

Éditeur CodePen avec police web appliquée

Le nom de la famille de polices (font-family) à utiliser dans le code CSS est également indiqué dans le projet web ; pour en savoir plus, consultez cette section traitant de l’utilisation de polices dans le code CSS.

Informations CSS dans l’éditeur de projets web

Bifurcation des Pens

Vous pouvez faire bifurquer les Pens publics, afin que d’autres utilisateurs puissent compléter le code. Les polices web fonctionneront également dans le Pen bifurqué.

Suppression d’un projet ou résiliation d’un abonnement

Si vous supprimez le projet que vous utilisez sur CodePen ou si vous résiliez votre abonnement, les polices ne seront plus disponibles dans aucun des Pens qui utilisent ce code incorporé. Cela inclut votre Pen initial, ainsi que tous les Pens qui en dérivent. Les polices de substitution spécifiées dans le code CSS seront appliquées à la place des polices web personnalisées.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne