html - poner - importar fuentes de google en css

Problemas de sustitución de la pila de fuentes CSS en Outlook al usar Google Webfonts

Question

Al utilizar Google Webfonts en un correo electrónico HTML, me topé con problemas de sustitución de fuentes en Outlook (2007,2010, etc.) que no ocurrieron antes de incorporar webfonts. Ignora las pilas de fuentes y va directamente a Times.

Esto sucede a pesar de usar pilas de fuentes de respaldo en línea.

Me he dado cuenta de problemas similares que se han publicado aquí anteriormente, pero solo como una pregunta general, no relacionada con el uso de webfonts. Anteriormente, todos los retrocesos de fuentes funcionaban correctamente. Estoy usando Litmus para realizar las pruebas de correo electrónico.

¿Alguien sabe por qué esto podría estar sucediendo?

Enlace a Litmus: https://litmus.com/pub/53a33c7/screenshots

Originalmente fuentes vinculadas en CSS como así:

<link href=''http://fonts.googleapis.com/css?family=Arvo|Droid+Serif:400,700,400italic,700italic|Roboto:300'' rel=''stylesheet'' type=''text/css''>

También intenté usar @ font-face y los archivos auto alojados después de ver una posible solución en otra respuesta , pero no funcionó (también actualicé los nombres de las clases):

Excepto por la solución temporal intentada por la fuente:

<!--[if !mso]><!--> 

@font-face {
    font-family: ''droid_serif'';
    src: url(''http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.eot'');
    src: url(''http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.eot?#iefix'') format(''embedded-opentype''),
         url(''http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.svg#droid_serif'') format(''svg''),  
         url(''http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.woff'') format(''woff''),
         url(''http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.ttf'') format(''truetype'');

    font-weight: normal;
    font-style: normal;

}
<!--<![endif]-->

El reemplazo de CSS específico de Outlook parece funcionar, pero hay problemas prioritarios. No creo que Outlook reconozca la importante declaración, por lo que he estado trabajando para realizar selecciones más específicas. Sin embargo, todavía no entiendo por qué sucede esto y si hay una solución más simple.

Extracto de anulación de fuente de Outlook:

    <!--[if gte mso 9]>
    <style>
        /* Target Outlook 2007 and 2010 */

            h1 { font-family: ''Georgia'',serif !important; font-weight:normal; }
            h1 a { font-family: ''Georgia'',serif !important; font-weight:normal; }
            h2 { font-family: ''Trebuchet MS'',arial, helvetica, sans-serif; font-weight:normal; }
            h3 { font-family: ''Trebuchet MS'',arial, helvetica, sans-serif; }
            .cover,img.cover,a.cover {
                display: block;
                visibility: visible;

                td { font-family: ''Trebuchet MS'',arial, helvetica, sans-serif; } 

                .droid { font-family: ''Georgia'', serif; }
}
    </style>
    <![endif]-->

Ejemplo de código problemático:

<td height="30" colspan="3" align="left" valign="middle" class="featured">
    <h2 style="text-align: left; padding: 0; margin: 0; color: #00799f; font-family: ''Roboto'',arial, helvetica, sans-serif; font-size: 21px; font-weight: 100; background: none; border-bottom: 1px solid #b1d6e2; text-decoration: none; line-height: 36px; mso-line-height-rule: exactly;">cover story</h2>
</td>

ACTUALIZAR:

He intentado con la sugerencia en las respuestas para poner el código de importación de la fuente web dentro de las etiquetas condicionales que excluyen Outlook en vano.

<!--[if !mso]><!-- -->
@import url(http://www.example.css);
<!--<![endif]-->

Y

<!--[if !mso]><!-- -->
@import url(http://fonts.googleapis.com/css?family=Oxygen);
<!--<![endif]-->

ACTUALIZACIÓN II (SOLUCIÓN):

Con toda la ayuda ofrecida, está claro que una cantidad de problemas aparentemente menores podrían causar este problema. El método de tipo de letra parece ser preferible a @import. Tener el nombre del archivo web no es el mismo que el de la fuente local puede causar el mismo problema, pero eso no es lo que sucedía con este correo electrónico en particular.

Probé el código condicional desde el principio para ocultar el código de importación de la fuente web de Outlook <!--[if !mso]><!--> conjunto.

El problema fue que lo hice dentro de una etiqueta de estilo CSS en la sección principal. Simplemente colocar este código en su propia etiqueta de estilo como se muestra a continuación marcó la diferencia.

Confirmé que funciona, ya que pude eliminar el código CSS de solución alternativa que había utilizado para detectar la versión de Outlook 2007 y posterior para restaurar los valores de h1, h2 en la pila de fuentes estándar.

<!--[if !mso]><!-->
<style type="text/css">
@font-face {
    font-family: ''oxygenlight'';
    src: url(''http://www----/fonts/oxygen-light-webfont.eot'');
    src: url(''http://www.----/fonts/oxygen-light-webfont.eot?#iefix'') format(''embedded-opentype''),
         url(''http://www.-----/fonts/oxygen-light-webfont.woff'') format(''woff''),
         url(''http://www.-----/fonts/oxygen-light-webfont.ttf'') format(''truetype''),
         url(''http://www.-----/fonts/oxygen-light-webfont.svg#oxygenlightlight'') format(''svg'');
    font-weight: normal;
    font-style: normal;
}
</style>
<!--<![endif]-->

Answer 1

Recuerdo haber tenido un problema similar hace un tiempo. Al final, creo que fue la @import causaba el problema y tuve que usar un método diferente para obtener las fuentes.

En lugar de usar @import utilice el método @font-face .

@font-face {
  font-family: ''Oxygen'';
  font-style: normal;
  font-weight: 400;
  src: local(''Oxygen''), local(''Oxygen-Regular''),     url(http://themes.googleusercontent.com/static/fonts/oxygen/v2/eAWT4YudG0otf3rlsJD6zOvvDin1pK8aKteLpeZ5c0A.woff) format(''woff'');
}

Luego use la fuente como lo haría normalmente:

h1 {
  font-family: ''Oxygen'', sans-serif;
}

Answer 2

El problema probablemente se deba a que su usuario tiene una versión de las fuentes instalada localmente y hay un conflicto.

Pruebe @ font-face import (esta es la forma en que funciona Google WebFonts de todos modos), y simplemente cambie el nombre de la familia de fuentes a algo diferente.

P.ej

@font-face {
    font-family: ''droid_serif'';

a:

@font-face {
    font-family: ''droid_serif_alt'';

¡Asegúrate de reflejar el cambio en el resto de tu marcado!

Answer 3

He estado teniendo este problema también y acabo de encontrar una solución bastante simple. Una vez que haya importado su fuente web, @media screen {} se puede usar para seleccionar clientes que admitan consultas de medios, y estos son los que admiten fuentes web. Por lo tanto, simplemente especificando la declaración de la familia de fuentes dentro y fuera de este selector, puede ocultar fuentes específicas de clientes de correo electrónico como Outlook, por lo que se mostrará su siguiente fuente alternativa y su fuente web aparecerá bien en los clientes que la admitan.

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);

.h1 { font-family: ''Arial'', ''Helvetica'', sans-serif }

@media screen {
    .h1 {
        font-family: Open Sans, ''Arial'', ''Helvetica'', sans-serif
    }
}

Incidentalmente, Campaign Monitor sugiere que @import es mejor que @ font-face en los correos electrónicos en general.

Answer 4

Para hacer que Outlook use su pila de fuentes en lugar de sustituir su fuente web por la fuente que elija Outlook, agregue un comentario condicional que solo leerá Outlook para asignar las fuentes de respaldo de la pila de fuentes. Defina su fuente web pero no la defina en el comentario condicional para que Outlook ignore la fuente web, vaya directo a su comentario condicional y solo muestre Arial.

<style>
        @import url(''http://www.yourdomain.com/webfont.css'');
</style>

    <!--[if gte mso 9]>
        <style>
            .webfontsubstitute { font-family: arial, sans-serif; }
        </style>
    <![endif]-->

</head>
<body>

    <a href="#" target="_blank" style="font-family:superwebfont,arial,sans-serif;">
    <span class="webfontsubstitute">WEB FONT STYLED TEXT HERE</span></a>

Answer 5

¿A dónde va este CSS? ¿Va en el encabezado más?

Answer 6

Debe usar " mso-font-alt " para Font-Fallback (Outlook 2010,2013,2016):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>

    ....

    <style type="text/css">

    @font-face {
        font-family: ''droid_serif'';
        src: url(''http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.eot'');
        src: url(''http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.eot?#iefix'') format(''embedded-opentype''),
         url(''http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.svg#droid_serif'') format(''svg''),  
         url(''http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.woff'') format(''woff''),
         url(''http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.ttf'') format(''truetype'');

        font-weight: normal;
        font-style: normal;
        mso-font-alt: ''Arial'';
    }

    ...

    </style>
</head>

Otro truco para anular declaraciones css personalizadas:

<!--[if mso]>
    <style> 
      body,table tr,table td,table th,a,span,table.MsoNormalTable { 
        font-family: ''Arial'', ''Helvetica'', ''sans-serif'' !important;  
      }
      .custom-headline{
          font-family: ''Times New Roman'', ''serif'' !important;
      }
    </style>
<![endif]-->

Por favor, eche un vistazo a: https://litmus.com/community/code/36-outlook-and-fallback-fonts

Answer 7

ACTUALIZAR: Esta es una técnica para invocar webfonts con respaldo a la pila de fuentes en todas las versiones de Outlook que se rompen

Intente declarar su webfont si NO es Outlook en su lugar. El webfont puede ser problemático para Outlook, por lo que no funcionar podría funcionar. Vale la pena intentarlo...

Editar:

Este problema se ha producido antes con la interrupción de Outlook cuando la primera fuente declarada está entre comillas. Esto parece una falla / limitación de Outlook que desafortunadamente es inevitable.