Actualmente, la compatibilidad con fuentes personalizadas en los clientes de email se limita a Apple Mail de iOS/macOS. Tenlo en cuenta e intenta diseñar tus emails pensando en las fuentes personalizadas como una "mejora progresiva".
Tutorial en vídeo: incrustar fuentes web personalizadas en emails HTML exportados desde Figma
En este vídeo verás cómo incrustar fuentes web personalizadas (con alternativas seguras para web) en emails HTML exportados desde Figma con el plugin Emailify.
Incrustar fuentes web personalizadas mediante URL
Si usas fuentes personalizadas, tienes que añadir un enlace directo a la URL del archivo de fuente .woff o .woff2. Puedes hacerlo con el botón Configure Fonts del panel Preview del plugin.
Ahí puedes pegar un enlace a cada una de las fuentes personalizadas que usas en tus diseños de email (por ejemplo, https://fonts.cdnfonts.com/s/8766/SansThirteenBlack.woff), que se incluirán como reglas CSS @font-face en el HTML exportado.
Asegúrate de enlazar directamente al archivo de fuente web .woff o .woff2. Si solo tienes un enlace a un CSS para incrustar la fuente, ábrelo en el navegador y deberías ver dentro un enlace url al archivo de fuente (por ejemplo, https://fonts.cdnfonts.com/s/8766/SansThirteenBlack.woff), que puedes copiar y pegar en el plugin.
Las fuentes personalizadas incrustadas solo funcionan en Apple Mail de iOS/macOS. Actualmente, la compatibilidad con fuentes personalizadas en los clientes de email se limita a Apple Mail de iOS/macOS. Tenlo en cuenta e intenta diseñar tus emails pensando en las fuentes personalizadas como una "mejora progresiva".
Definir y previsualizar fuentes alternativas seguras para web
Si usas fuentes personalizadas en tus emails, puedes definir una fuente alternativa segura para web para cada una. Se mostrará en su lugar cuando el email HTML se vea en cualquier cliente de email que no admita fuentes personalizadas.
En el mismo panel de ajustes Configure Fonts también puedes indicar fuentes alternativas para cualquier fuente de Google o fuente personalizada.
Si has indicado fuentes alternativas seguras para web para las fuentes web personalizadas de tu email, puedes previsualizar cómo se verán activando el interruptor Show Fallback Fonts en la parte inferior de la ventana de vista previa de Emailify.
Lista de fuentes alternativas seguras para web
Estas son las fuentes seguras para web que puedes asignar a cualquier fuente web personalizada de tus diseños de email de Figma. Como las fuentes personalizadas incrustadas solo funcionan en Apple Mail de iOS/macOS, las fuentes alternativas que indiques aquí determinarán qué fuente se muestra en el resto de clientes de email (por ejemplo, Outlook, Gmail, etc.), que por desgracia no admiten fuentes personalizadas.
Fuentes alternativas seguras para web sin serifa
- Arial
- Arial Black
- Tahoma
- Trebuchet MS
- Verdana
Fuentes alternativas seguras para web con serifa
- Georgia
- Times New Roman
Fuentes alternativas seguras para web monoespaciadas
- Courier New
Usar fuentes de Google en tus emails
Emailify incluye automáticamente el código @import de Google Fonts en tus exportaciones HTML para cualquier capa de Figma que use una fuente de la biblioteca de Google Fonts que Figma incluye de forma predeterminada.
Ten en cuenta que las fuentes de Google solo se verán en los clientes de email que admiten el uso de @font-face en emails. En los clientes de email que no admiten fuentes personalizadas, se cargará automáticamente una fuente alternativa segura para web (por ejemplo, "Arial", "Georgia" o "Courier").
Las fuentes de Google solo funcionan en Apple Mail de iOS/macOS. Actualmente, la compatibilidad con fuentes personalizadas en los clientes de email se limita a Apple Mail de iOS/macOS. Tenlo en cuenta e intenta diseñar tus emails pensando en las fuentes personalizadas como una "mejora progresiva".
Usar fuentes personalizadas en tus imágenes. Si necesitas que una fuente personalizada se vea igual en todos los clientes de email, puede que te convenga poner tus capas de texto dentro de un frame "Image". Ese texto se exportará como parte de la propia imagen, así que no dependerá de que el cliente admita fuentes web personalizadas para mostrarse correctamente.