CodePen es un editor web de código HTML, CSS y JavaScript que le permite probar el código directamente en el navegador. Puede usar fuentes web personalizadas en sus propios fragmentos de código o “Pens”.
Seleccionar fuentes para usarlas
Siga los pasos del tutorial de fuentes web para elegir algunas fuentes y crear su proyecto web.
Añadir el código incrustado al Pen
El código incrustado se puede añadir a la interfaz de usuario de CodePen en el campo “Stuff for <head>” (Contenido de <head>) en el menú de configuración del editor HTML o en el menú “CSS > Add External CSS” (CSS > Añadir CSS externo).
Para encontrar el código incrustado de su proyecto, vaya a la página Proyectos web y busque el nombre del proyecto. Copie y pegue el código CSS incrustado del proyecto en una de las ubicaciones que se señalan a continuación.
Aplicar las fuentes en el CSS
Ahora puede usar los nombres de font-family en el editor CSS del Pen y las fuentes se podrán ver inmediatamente en el recuadro de previsualización.
El nombre de font-family que se vaya a utilizar en CSS aparece también en el proyecto web; consulte más información sobre cómo usar fuentes en CSS.
Bifurcar Pens
Los Pens públicos se pueden bifurcar, lo que permite a otros usuarios hacer modificaciones en su código. Las fuentes web también funcionan en el Pen bifurcado.
Eliminar un proyecto o cancelar una suscripción
Si elimina el proyecto que está utilizando en CodePen o cancela su suscripción, las fuentes ya no estarán disponibles en ninguno de los Pens que tengan el código incrustado. Esto incluye su Pen original, así como todos los Pens que se hayan bifurcado. Las fuentes alternativas indicadas en el CSS se aplicarán en sustitución de las fuentes web personalizadas.
Temas relacionados
Explorar Adobe Fonts
Encuentra el tipo de letra perfecto para cualquier proyecto web o de impresión.
