Utiliza el código del proyecto web de Adobe y revisa la licencia de las fuentes elegidas. La web de un cliente necesita la suscripción Creative Cloud del propio cliente. Incrustar CSS correctamente no garantiza por sí solo el cumplimiento de todas las condiciones.
Descargo de responsabilidad
Licencias web y titularidad de la cuenta
Consulta la documentación vigente de licencias web de Adobe antes de configurar un proyecto de cliente.
Limitación
Los elementos HTML incrustados en Wix funcionan dentro de un iframe. Una fuente cargada allí se aplica al contenido del iframe, no a los demás elementos de texto de Wix. Cargar la fuente en la página principal tampoco modifica automáticamente el iframe.
Proceso de integración paso a paso
1. Crear un proyecto web en Adobe Fonts
Comience visitando Adobe Fonts y seleccionando fuentes para su sitio web. Cree un "proyecto web" y tome nota del ID de su proyecto, que será crucial para incrustar las fuentes en su sitio.
2. Incrustar el CSS de Adobe Fonts en Wix
Incluye la hoja de estilos de tu proyecto web de Adobe en la cabecera HTML del elemento incrustado. Sustituye el ID por el que proporciona Adobe para tu proyecto. Este ejemplo dentro de un iframe no requiere otra instalación en el código personalizado de todo el sitio:
<link rel="stylesheet" href="https://use.typekit.net/[yourprojectID].css">
Para obtener instrucciones más detalladas sobre cómo crear y administrar su proyecto web en Adobe Fonts, visite su guía oficial .
3. Utilizar el bloque HTML para elementos de texto
Ahora, integre la fuente personalizada en su sitio utilizando el bloque HTML proporcionado. Asegúrese de reemplazar [YourProjectID] con el ID de su proyecto. Personalice la familia de fuentes, el tamaño, el peso y el estilo dentro de este HTML para que coincida con el diseño de su sitio:
<html> <head> <title>Adobe Fonts Integration</title> <style> @import url("https://use.typekit.net/[YourProjectID].css"); body { margin: 20px auto; max-width: 980px; font-family: Arial, sans-serif; } .demo-header { font-family: "kit-rounded", sans-serif; font-weight: 400; font-style: normal; font-size: 24px; margin-bottom: 10px; } .demo-paragraph { font-family: 'logic-monoscript', monospace; font-size: 16px; line-height: 1.5; overflow: hidden; margin-bottom: 20px; } </style> </head> <body> <h1 class="demo-header"> This is Kit-Rounded </h1> <p class="demo-paragraph"> This text uses the "logic-monoscript" font for the paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </body> </html>
Inserta este bloque HTML en un elemento HTML en tu sitio Wix donde quieras que aparezca la fuente de Adobe.
Así es como se ve la inserción HTML en vivo en un blog:
Así es como se ve una aplicación práctica de esta inserción:
Consejos de personalización y estilo
Experimente con diferentes fuentes y estilos dentro del bloque HTML para que coincidan mejor con el diseño de su sitio. Ajuste el tamaño, el peso y el estilo de la fuente para mejorar la legibilidad y la estética. Adobe Fonts ofrece una variedad de fuentes que pueden adaptarse a cualquier estado de ánimo o identidad de marca, lo que facilita encontrar la combinación perfecta para su sitio.
Mantenimiento y Actualización
Los cambios en el proyecto web de Adobe afectan a las fuentes que proporciona. Comprueba que la familia, el peso y el estilo solicitados en cada elemento incrustado siguen incluidos en el proyecto. Revisa la presentación en pantallas pequeñas y grandes.
Conclusión
Integrar Adobe Fonts en tu sitio Wix puede mejorar significativamente el diseño de tu sitio web y la experiencia del usuario. Si bien el proceso requiere atención a los detalles, el resultado es un sitio visualmente cohesivo y atractivo.
Si está interesado en agilizar este proceso o si tiene ideas para una aplicación que entregue Adobe Fonts de manera más eficiente en sitios Wix, estoy buscando colaboradores. Si eres desarrollador, diseñador o simplemente estás interesado en la tipografía web, me encantaría saber de ti.
Información del contacto
No dude en comunicarse conmigo para analizar posibles oportunidades de colaboración o si necesita ayuda con su proyecto de integración de fuentes.
Si sigue esta guía, estará bien encaminado para crear un sitio web visualmente impresionante que se destaque entre la multitud. ¡Feliz diseño!
