2010-09-12 7 views
62

He estado desarrollando un sitio que usa el Google Fonts API. Es genial, y supuestamente ha sido probado en IE, pero cuando se prueba en IE 8, las fuentes simplemente no tienen estilo.¿Cómo hacer que Google Fonts funcione en IE?

que incluyen el tipo de letra, como Google instructs, por lo tanto:

<link href="http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light" 
rel="stylesheet" type="text/css" /> 

y ha añadido su nombre a la parte delantera de una familia de fuentes en CSS así:

body { 
font-family: "Josefin Sans Std Light", "Times New Roman", Times, serif; 
font-size: 16px; 
overflow-y: scroll; 
overflow-x: hidden; 
color: #05121F; 
} 

funciona como un encanto en Chrome, Firefox, Safari. No hay dados en IE 8. ¿Alguien sabe por qué?

+5

Una nota para los desarrolladores que utilizan EI11 emular volver a IE8-: tienes que asegúrese de cambiar el ** user agent string ** vuelve a la versión anterior de IE, ya que el simple hecho de cambiar el modo de documento no permitirá que los servidores de Google sepan que envía el tipo de fuente correcto (EOT). – Impirator

Respuesta

51

El método, como lo indica su página technical considerations, es correcto, por lo que definitivamente no está haciendo nada incorrecto. Sin embargo, this bug report en Google Code indica que hay un problema con las fuentes que Google produjo para esto, específicamente la versión de IE. Esto solo parece afectar solo algunas fuentes, pero es un verdadero bummmer.

Las respuestas en el hilo indican que el problema radica en los archivos que Google está publicando, por lo que no hay nada que puedas hacer al respecto. El autor sugiere obtener las fuentes de ubicaciones alternativas, como FontSquirrel, y publicarlas localmente, en cuyo caso es posible que también le interesen sitios como the League of Movable Type.

N. B. A partir de octubre de 2010, el problema se informó como arreglado y cerrado en el informe de fallas del Código de Google.

+5

+1 para proporcionar (mejores) alternativas. –

+1

@Yi Jiang, tienes razón, estoy publicando los archivos localmente, con el kit [@ font-face kit] más sólido de Font Squirrel (http://www.fontsquirrel.com/fontface) y funciona muy bien. –

+9

Oh, en cuanto a que este problema se solucione y se cierre, Google tiene muchos webfonts populares que no funcionan en IE en 2013. Esto huele a una intención deliberada de "fecundar" la experiencia de navegación de IE. Utilice Font Squirrel en su lugar como primera opción, hasta que los navegadores hayan terminado con su concurso de popularidad. – 3Dom

1

Usted puede intentar fontsforweb.com donde las fuentes están trabajando para todos los navegadores, ya que se proporcionan en la TTF, WOFF y EOT formatea junto con el código CSS lista para ser pegada en su página es decir

@font-face{ 
    font-family: "gothambold1"; 
    src: url('http://fontsforweb.com/public/fonts/5903/gothambold1.eot'); 
    src: local("Gotham-Bold"), url('http://fontsforweb.com/public/fonts/5903/gothambold1.woff') format("woff"), url('http://fontsforweb.com/public/fonts/5903/gothambold1.ttf') format("truetype"); 
} 
.fontsforweb_fontid_5903 { 
    font-family: "gothambold1"; 
} 

o puede descargar comprimido en un paquete con el archivo CSS adjunta

continuación, sólo tiene que añadir la clase a cualquier elemento para aplicar esa fuente es decir

<h2 class="fontsforweb_fontid_5903">This will be written with Gotham Bold font and will work in all browsers</h2> 

Vea funcionar: http://jsfiddle.net/SD4MP/

63

Parece que IE8-IE7 no puede comprender múltiples estilos de fuente web de Google a través de la misma petición de archivo usando las etiquetas linkhref.

Estos dos enlaces me ayudaron a resolver esto:

La única forma que he conseguido trabajar en IE7-IE8 es tener sólo una solicitud Google Web Font.Y sólo tienen un estilo de fuente en el href del link etiqueta:

por lo que normalmente tendría esto, declarando múltiples estilos de fuente en la misma petición:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic" /> 

Pero en IE7-IE8 añadir un IE condicional y especificar cada estilo de fuente Google separado y funcionará:

<!--[if lte IE 8]> 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400" /> 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:700" /> 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:800" /> 
<![endif]--> 

Esperamos que esto pueda ayudar a los demás!

+7

Esta debería ser la respuesta aceptada. Un artículo de Smashing Magazine aborda el tema en profundidad (y ofrece la misma solución): http://www.smashingmagazine.com/2012/07/11/avoiding-faux-weights-styles-google-web-fonts/ –

+0

Pero el IE más antiguo solo admite 32 hojas de estilo, por lo que esto podría causar problemas peores :( – NoBugs

+0

Eso es solo cuando se usa '@ import' at-rule ... no dentro de un' IE conditional'. @import siempre ha tenido limitaciones, sin mencionar rendimiento lento. No puedo ver una instancia en la que va a cargar tantas hojas de estilo. Si es así Siempre es una buena práctica combinar todas las hojas de estilo para obtener el mejor rendimiento para limitar las solicitudes del servidor. –

3

Por lo que vale, no pude hacerlo funcionar en IE7/8/9 y la opción de declaración múltiple no hizo ninguna diferencia.

La corrección para mí fue como resultado de las instrucciones de la Technical Considerations Page donde destaca ...

Para una mejor visualización en Internet Explorer, hacer que la etiqueta de hoja de estilo 'enlace' del primer elemento de en el HTML 'Sección principal.

Funciona en IE7/8/9 para mí ahora.

2

Probé todas las opciones desde arriba y no funcionaron. Luego ubiqué la fuente de google (Over the Rainbow) en mi carpeta (nueva) y usé IE condicional a continuación y funcionó perfectamente.

<!--[if IE]> 
<style type="text/css"> 
    @font-face { 
    font-family: "Over the Rainbow"; 
    src: url("../new/over.ttf"); 
    src: local("Over the Rainbow"), url("../new/over.ttf"); 
    } 
</style> 
<![endif]--> 

espero que ayudará

0

probar este tipo de enlace, se ejecutará en IE también. espero que esto ayude .

<link href='//fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700,300italic' rel='stylesheet' type='text/css'> 
+2

No creo que realmente lo haga. y debajo requieren un enlace por separado para cada uno de los diferentes pesos de fuente. Consulte la respuesta de @PAPAFRESH anterior. –

0

Tuve el mismo problema contigo. Encontré una solución usando un código de Adobe Web Fonts, funcionaba perfectamente en Internet Explorer, Chrome, Firefox y Safari.

Más información en esta página: http://html.adobe.com/edge/webfonts/

7

mientras que la solución de Yi Jiang puede trabajar, no creo que el abandono de la API de Google Web Font es la respuesta aquí. Servimos un archivo jQuery local cuando no está correctamente cargado desde el CDN, ¿verdad?

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="/js/jquery-1.9.0.min.js"><\/script>')</script> 

¿Por qué no habría que hacer lo mismo para las fuentes, específicamente para < IE9?

<link href='http://fonts.googleapis.com/css?family=Cardo:400,400italic,700' rel='stylesheet' type='text/css'> 
<!--[if lt IE 9]><link href='/css/fonts.css' rel='stylesheet' type='text/css'><![endif]--> 

Aquí está mi proceso al utilizar fuentes personalizadas: carpeta ZIP

  1. de descarga de la fuente de Google, y el uso Font Squirrel's @font-face Generator para crear la fuente web local.
  2. Cree un archivo fonts.css que llame a los archivos de fuentes alojados localmente recientemente creados (solo se vinculará al archivo si < IE9, como se muestra arriba). NOTA: El generador @ font-face crea este archivo por usted.

    @font-face { 
        font-family: 'cardoitalic'; 
        src: url('cardo-italic-webfont.eot'); 
        src: url('cardo-italic-webfont.eot?#iefix') format('embedded-opentype'), 
        url('cardo-italic-webfont.woff') format('woff'), 
        url('cardo-italic-webfont.ttf') format('truetype'), 
        url('cardo-italic-webfont.svg#cardoitalic') format('svg'); 
        font-weight: normal; 
        font-style: normal; 
    } 
    @font-face { 
        font-family: 'cardobold'; 
        src: url('cardo-bold-webfont.eot'); 
        src: url('cardo-bold-webfont.eot?#iefix') format('embedded-opentype'), 
        url('cardo-bold-webfont.woff') format('woff'), 
        url('cardo-bold-webfont.ttf') format('truetype'), 
        url('cardo-bold-webfont.svg#cardobold') format('svg'); 
        font-weight: normal; 
        font-style: normal; 
    } 
    @font-face { 
        font-family: 'cardoregular'; 
        src: url('cardo-regular-webfont.eot'); 
        src: url('cardo-regular-webfont.eot?#iefix') format('embedded-opentype'), 
        url('cardo-regular-webfont.woff') format('woff'), 
        url('cardo-regular-webfont.ttf') format('truetype'), 
        url('cardo-regular-webfont.svg#cardoregular') format('svg'); 
        font-weight: normal; 
        font-style: normal; 
    } 
    
  3. usar el IE clases condicionales en su hoja de estilo principal para que se evite faux weights and styles, sus estilos de fuente podría tener este aspecto:

    h1{ 
        font-size:3.25em; 
        font-weight:normal; 
        font-style:italic; 
        font-family:'Cardo','cardoitalic',serif; 
        line-height:1.25em; 
    } 
    h2{ 
        font-size:2.75em; 
        font-weight:700; 
        font-family:'Cardo','cardobold',serif; 
        line-height:1.25em; 
    } 
    strong 
    ,b{ 
        font-family:'Cardo','cardobold',serif; 
        font-weight:700, 
    } 
    .lt-ie9 h1{ 
        font-style:normal; 
    } 
    .lt-ie9 h2{ 
        font-weight:normal; 
    } 
    .lt-ie9 strong, 
    .lt-ie9 b{ 
        font-weight:normal, 
    } 
    

Claro, es un poco de trabajo extra, pero no tiene llegamos a esperar esto de IE? Además, se convierte en una segunda naturaleza después de un tiempo.

+2

tenga cuidado al usar este método porque algunas de estas fuentes pueden tener ciertos requisitos de licencia que requieren que sean servidos ed desde un servidor alojado. Solo un recordatorio: asegúrese de tener una licencia válida para usar la fuente antes de alojarlos en su propio servidor. –

14

Google Fonts usa Web Open Font Format (WOFF), que es bueno, porque es el formato de fuente recomendado por el W3C.

Las versiones de IE anteriores a IE9 no son compatibles con el formato de fuente abierta web (WOFF) porque no existía en ese momento. Para admitir < IE9, debe mostrar su fuente en Embedded Open Type (EOT). Para hacerlo, tendrá que escribir su propia etiqueta @ font-face css en lugar de usar la secuencia de comandos de inserción de Google. También necesita convertir el archivo WOFF original a EOT.

Puede convertir su WOFF a EOT aquí por primera conversión a TTF y luego a EOT: http://convertfonts.com/

A continuación, puede servir a la fuente EOT como esto:

@font-face { 
    font-family: 'MyFont'; 
    src: url('myfont.eot'); 
} 

Ahora funciona en < IE9. Sin embargo, los navegadores modernos ya no son compatibles con EOT, por lo que ahora sus fuentes no funcionarán en los navegadores modernos. Entonces necesita especificarlos ambos. La propiedad src apoya esta por coma que separa las direcciones URL de fuente y specefying del tipo:

src: url('myfont.woff') format('woff'), 
    url('myfont.eot') format('embedded-opentype'); 

Sin embargo, < IE9 no entiende esto, sólo Graps el texto entre la primera cita y la última cita, por lo que se en realidad obtener:

myfont.woff') format('woff'), 
url('myfont.eot') format('embedded-opentype 

como la URL de la fuente. Podemos solucionar esto primero especificando un src con solo una url que es el formato EOT, luego especificando una segunda propiedad src que es para los navegadores modernos y < IE9 no entenderá. Como < IE9 no lo entenderá, ignorará la etiqueta para que el EOT siga funcionando. Los navegadores modernos utilizarán la última fuente especificada que admitan, por lo que probablemente WOFF.

src: url('myfont.eot'); 
src: url('myfont.woff') format('woff'); 

Así que sólo porque en la segunda propiedad src especifica el format('woff'), < IE9 no lo entenderán (o en realidad simplemente no puede encontrar la fuente en la url myfont.woff') format('woff) y va a seguir usando la primera especificada uno (eot).

¡Ahora tiene sus Google Webfonts trabajando para < IE9 y navegadores modernos!

Para obtener más información acerca de diferentes tipos de letra y el apoyo del navegador, lea este artículo perfecto por Alex Tatiyants: http://tatiyants.com/how-to-get-ie8-to-support-html5-tags-and-web-fonts/

+0

Eso es lo que hice cuando trabajaba con Open Sans Light, 300, 400 familias de fuentes. Algunos de ellos no querían renderizar en FF, y algunos en IE. Entonces, encontré la misma solución de usar '@ font-face' en .css y funcionó. No estoy seguro, aunque si es una solución perfecta ya que está usando una url, que puede cambiarse en un futuro –

+0

Si aloja las fuentes usted mismo, no hay problema. – rednaw

+0

Esto no es cierto, las fuentes de Google sí envían versiones EOT. Simplemente detecta el agente de su navegador y le envía solo el tipo necesario. Puedes intentar emularlo en tu IE, no olvides cambiar la * cadena del agente de usuario *. Probado con la fuente pacifico, Josefin y Source Sans Pro. –

1

Todo es cuestión de probar todas esas respuestas, para mí, nada funciona excepto la siguiente solución: Google fuente sugirió

@import 'https://fonts.googleapis.com/css?family=Assistant'; 

Pero, estoy usando fuentes de idiomas extranjeros, y no funcionó en IE11 solamente. Me enteré de esta solución que funcionó:

@import 'https://fonts.googleapis.com/css?family=Assistant&subset=hebrew'; 

la esperanza de que alguien ahorrar un tiempo precioso

Cuestiones relacionadas