otf - fuentes personalizadas css

¿Cómo hacer que Google Fonts funcione en IE?

Question

He estado desarrollando un sitio que usa la API de Google Fonts . Es genial, y supuestamente ha sido probado en IE, pero cuando se prueba en IE 8, las fuentes simplemente no tienen estilo.

Incluí la fuente, como instructs Google, así:

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

y agregó su nombre al frente 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é?

Answer 1

El método, como lo indica su página de consideraciones técnicas , es correcto, por lo que definitivamente no está haciendo nada incorrecto. Sin embargo, este informe de errores 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 también podría interesarle sitios como League of Movable Type .

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

Answer 2

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 admiten Web Open Font Format (WOFF) porque no existía en ese momento. Para admitir <IE9, debe servir 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í convirtiéndolo primero a TTF y luego a EOT: http://convertfonts.com/

Entonces puede servir la fuente EOT así:

@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 admite esto mediante una coma que separa las URL de la fuente y especifica el tipo:

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

Sin embargo, <IE9 no entiende esto, simplemente dibuja el texto entre la primera cita y la última cita, por lo que realmente obtendrá:

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

como la URL a 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 lo 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'');

Solo porque en la propiedad de la segunda propiedad especificas el format(''woff'') , <IE9 no lo entenderá (o simplemente no puede encontrar la fuente en el url myfont.woff'') format(''woff ) y seguirá usando el primero especificado (eot).

¡Ahora tienes tus Google Webfonts trabajando para <IE9 y los navegadores modernos!

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

Answer 3

Parece que IE8-IE7 no puede entender múltiples estilos de fuentes de Google Web a través de la misma solicitud de archivo utilizando las etiquetas de link href .

Estos dos enlaces me ayudaron a resolver esto:

• Vea este problema abierto de Google y mire los comentarios.
• Ver también este StackOverlow Respuesta Google Web Fonts no funciona en IE8

La única forma en que lo he conseguido para trabajar en IE7-IE8 es tener solo una solicitud de fuente web de Google. Y solo tiene un estilo de fuente en el href de la etiqueta de link :

Por lo general, tendrías esto, declarando múltiples estilos de fuente en la misma solicitud:

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

Pero en IE7-IE8 agrega un IE condicional y especifica cada estilo de fuente de Google por 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]-->

Espero que esto pueda ayudar a otros!

Answer 4

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 solución para mí fue como resultado de las instrucciones en la página de consideraciones técnicas donde se destaca ...

Para obtener la mejor visualización en IE, haga que la etiqueta de "enlace" de la hoja de estilo sea el primer elemento en la sección "encabezado" de HTML.

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

Answer 5

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 ayude

Answer 6

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

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

Answer 7

Puede probar fontsforweb.com, donde las fuentes funcionan para todos los navegadores, ya que se proporcionan en formatos TTF, WOFF y EOT junto con el código CSS listo para pegar 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 descargarlos comprimidos en un paquete con el archivo CSS adjunto

luego simplemente agrega 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>

Véalo funcionar: http://jsfiddle.net/SD4MP/

Answer 8

Se trata de probar todas esas respuestas, para mí, nada funciona, excepto la siguiente solución: fuente de Google sugerida

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

Pero, estoy usando fuentes de idioma extranjero aquí, y no funcionó en IE11 solamente. Descubrí esta solución que funcionó:

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

Espero que a alguien le ahorre un tiempo precioso

Answer 9

Si bien la solución de Yi Jiang puede funcionar, no creo que abandonar el Google Web Font API sea la respuesta correcta 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>

Entonces, ¿por qué no haríamos lo mismo con 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]-->

Este es mi proceso cuando uso fuentes personalizadas:

1. Descargue la carpeta ZIP de la fuente desde Google y use el generador @ font-face de Font Squirrel para crear la fuente web local.

2. Cree un archivo fonts.css que llame a los archivos de fuentes alojados localmente y recién creados (solo vinculando 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. Al usar las clases condicionales de IE en la hoja de estilos principal para evitar smashingmagazine.com/2012/07/11/… , los estilos de fuente pueden verse así:

   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 más de trabajo, pero ¿no hemos llegado a esperar esto de IE? Además, se convierte en una segunda naturaleza después de un tiempo.

Answer 10

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

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