Tengo las siguientes líneas en mi CSS.font-face no parece estar funcionando en IE8?
@font-face { font-family: Keffeesatz; src: url(/Styles/YanoneKaffeesatz-Light.otf) format("opentype") }
@font-face { font-family: KeffeesatzBold; src: url(/Styles/YanoneKaffeesatz-Bold.otf) format("opentype") }
En IE9, estos aparecen. En IE8, está usando la fuente alternativa, Arial. ¿Cómo hago para que esto funcione en IE8?
Debe proporcionar una versión EOT de su fuente para que las versiones anteriores de IE la incrusten. No reconocerán ningún otro formato, por lo que estás observando la alternativa a Arial.
Lleve su fuente al Font Squirrel @font-face Generator y preparará todo para usted, incluyendo un nuevo conjunto de reglas CSS @font-face para usar sobre las existentes.
Finalmente conseguí que Font Squirrel trabajara para mí. Me encanta la salida! ¡Fantástico! ¡Gracias! –
Internet Explorer no reconoce sus fuentes de fuente .ttf (TrueType) o .otf (OpenType) en CSS3, al menos no todavía. IE reconoce un .eot (tipo abierto incrustable).
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Tome un vistazo a here
Intente ejecutar la fuente a través de [generador de fontsquirrel] (http://www.fontsquirrel.com/fontface/generator) y ver lo que bielas a cabo. Para que las fuentes personalizadas funcionen en varios navegadores, debe tener la fuente disponible en varios formatos. –
Parece que el generador de fontsquirer no funciona para mí. Después de subir archivos, todavía dice que no tengo archivos cargados y que no hay fuentes en la descarga que proporciona. Lo he intentado con FireFox 10 e IE8. Lo intentaré con otro navegador esta noche cuando llegue a casa. –
El sitio web de FontSquirrel está siendo muy, muy lento para mí hoy. Me pregunto si están teniendo algunos problemas. También puede echar un vistazo a algunas de las [fuentes web de google] (http://www.google.com/webfonts) para ver cómo han hecho las cosas. –