Guía del usuario Cancelar

Usar fuentes web con CodePen

  1. Guía del usuario de Adobe Fonts
  2. Introducción
    1. Requisitos del sistema y de suscripción
    2. Compatibilidad con navegadores y sistemas operativos
    3. Añadir fuentes en el ordenador
    4. Añadir fuentes al sitio web
    5. Añadir fuentes en CC Mobile
  3. Licencias de fuentes
    1. Licencias de fuentes
    2. Administrar la cuenta
    3. Licencias para clientes de Creative Cloud para empresas
    4. Añadir licencias de fuentes a la cuenta
    5. Eliminación de fuentes de la biblioteca de suscripción
    6. Adobe Fonts no está disponible para Adobe ID registrados en China
    7. ¿Por qué no se incluyen estas fuentes con mi suscripción a Creative Cloud?
    8. Retirada de fuentes de Morisawa en septiembre de 2021
  4. Obtener y usar fuentes
    1. Uso de Adobe Fonts en las aplicaciones de Creative Cloud
    2. Administrar las fuentes
    3. Resolver problemas por fuentes no disponibles en las aplicaciones de escritorio
    4. Uso de fuentes en InDesign
    5. Fuentes y tipografía
    6. Uso de fuentes web en documentos HTML5 Canvas
    7. Uso de fuentes en InCopy
    8. Cómo usar fuentes en Adobe Muse
    9. Uso de fuentes web en Muse
    10. Empaquetar archivos de fuentes
    11. Guía de solución de problemas: añadir fuentes
    12. Las fuentes añadidas no aparecen en el menú de fuentes
    13. “No es posible añadir una o más fuentes” o “Fuente con mismo nombre ya instalada”
    14. ¿Qué sucede cuando la fuente que estoy utilizando la modifica el creador o empresa tipográfica?
  5. Diseño y desarrollo web
    1. Añadir fuentes al sitio web
    2. Guía de solución de problemas: Añadir fuentes a un sitio web
    3. Uso de fuentes web en correos electrónicos HTML o newsletters
    4. Uso de fuentes web con Accelerated Mobile Pages (AMP)
    5. Selectores CSS
    6. Personalizar el funcionamiento de las fuentes web con los ajustes de font-display
    7. Códigos incrustados
    8. Subconjuntos dinámicos y alojamiento de fuentes web
    9. Eventos de fuentes
    10. ¿Por qué mis fuentes web proceden de use.typekit.net?
    11. El sitio no puede conectarse a use.typekit.net
    12. Uso de fuentes web con CodePen
    13. Compatibilidad con navegadores y sistemas operativos
    14. Dominios
    15. Uso de fuentes web al desarrollar de forma local
    16. Política de seguridad de contenido
    17. Impresión de fuentes web
  6. Compatibilidad con idiomas y funciones OpenType
    1. Compatibilidad con idiomas y subconjuntos
    2. Uso de funciones OpenType
    3. Sintaxis de funciones OpenType en CSS
  7. Tecnología de fuentes
    1. Fuentes de color de OpenType-SVG
    2. Ten Mincho: aspectos importantes sobre la actualización de la versión 1.000

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.

Uso de CodePen con el código CSS incrustado predeterminado

Uso de CodePen vinculando directamente el archivo CSS

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.

Editor de CodePen con fuente web aplicada

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.

Información de CSS en la página del proyecto web

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.

 Adobe

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?