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.
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.
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.
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.
Autres ressources similaires
Accéder à votre compte