html - para - fuentes personalizadas css
Outlook 2013 Ignora la familia de fuentes (4)
¿Cuál es la mejor manera de especificar la familia de fuentes al codificar correos electrónicos para Outlook 2013? Descubrí que font-family se ignora cuando se agrega en línea de esta manera:
<span style="font-family: Helvetica, Arial, sans-serif;">Text</span>
He descubierto que esto funciona:
<span><font face="Helvetica, Arial, sans-serif">Text</font></span>
Sin embargo, esto es un problema, ya que tengo que agregar la etiqueta en todas partes donde se agrega el texto. Se ignora envolver una etiqueta alrededor de varios elementos. ¿Hay alguna manera de configurar la fuente una vez y olvidarme de ella?
Una forma efectiva de obligar a Outlook 2013 a utilizar la pila de fuentes especificada es envolver el texto en cuestión en un <span> y utilizar !important al definir la font-family . Outlook eliminará todas las fuentes de Google que estén definidas en el encabezado, pero otros clientes de correo electrónico las usarán. Aquí hay un ejemplo:
<head>
<link href=''http://fonts.googleapis.com/css?family=Indie+Flower'' rel=''stylesheet'' type=''text/css''>
</head>
<body>
<table>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
This will always be Helvetica.
</td>
</tr>
</table>
<table>
<tr>
<td style="font-family: ''Indie Flower'', Helvetica, Arial, sans-serif; font-size: 12px;">
Outlook will display Times New Roman. Others will display Helvetica or Indie Flower.
</td>
</tr>
</table>
<table>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
<span style="font-family: ''Indie Flower'', Helvetica, Arial, sans-serif !important;">
Outlook will display Helvetica, others will display Indie Flower.
</span>
</td>
</tr>
</table>
</body>
Esto vino de este asombroso artículo: https://www.emailonacid.com/blog/article/email-development/custom-font-stacks-in-outlook
Desafortunadamente, en mi experiencia, la etiqueta de font es lo único que funciona de manera consistente en Outlook (y en Windows Phone, vaya figura). También querrá agregar la CSS estándar en línea para su texto, ya que algunos clientes no representan font atributo de la face font .
¿Cómo estás construyendo tus correos electrónicos? Si está usando tablas, entonces
<td style="font-family: Helvetica, Arial, sans-serif;">
Funcionará bien en CUALQUIER cliente. Solo necesita usar un lapso si parte del texto en el difiere del resto.
Outlook 2013 NO lo ignora en el encabezado. Lo sé porque he creado muchos correos electrónicos y escribo un estilo: visitado en el encabezado para que Outlook (específicamente) no los cambie de color púrpura y definitivamente funciona.
EDITAR: Una respuesta más precisa sería para mí decir que no, lamentablemente tiene que especificar el estilo en línea cada vez. (¡No vi esa parte de la pregunta al principio!)
Retazo:
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 14px; line-height: 18px; text-align: center; color: #000000;">
Some text here.....
</td>
</tr>
</table>
Tuve este problema y encontré la siguiente publicación que solucionó el problema: https://litmus.com/community/discussions/982-outlook-overrides-font-to-times-new-roman
Básicamente, debe agregar el siguiente fragmento de estilo css condicional justo después de la etiqueta del body en la plantilla de correo electrónico que desea que Outlook tome la familia de fuentes deseada (en este caso, Arial, Helvetica o San-Serif) en lugar de la pegajosa MSO Times- Nueva fuente romana:
<!--[if mso]>
<style type="text/css">
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style>
<![endif]-->