incrustación de fuentes con css

Estoy tratando de importar una fuente usando el CSS a continuación, funciona en Firefox e IE, pero no en Chrome no es compatible. ¿Me pueden ayudar a hacer que funcione en Chrome también?

@font-face {
    font-family: "Fontin-Bold";
    src: url(fonts/Fontin-Bold.ttf);
    src: url(fonts/Fontin-Bold.eot);
}

preguntado el 03 de mayo de 12 a las 10:05

¿Ves algún error, usando la herramienta de desarrollador, al ver la página con Chrome? -

1 Respuestas

Los diferentes navegadores tienen diferentes necesidades y las fuentes no son una excepción. Aquí hay un ejemplo completo:

CO

@font-face {
    font-family: 'UbuntuBold';
    src: url('ubuntu-bold-webfont.eot');
    src: url('ubuntu-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('ubuntu-bold-webfont.woff') format('woff'),
         url('ubuntu-bold-webfont.ttf') format('truetype'),
         url('ubuntu-bold-webfont.svg#UbuntuBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

Es mejor usar un generador de fuentes y caras como: Font Squirrel

Además, debe establecer un .htaccess en su carpeta de fuentes con los siguientes tipos:

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf

EDITADO:

Para explicar mejor la diferentes formatos de fuente VS diferentes navegadores:

  • Firefox y Safari admiten el formato TTF u OTF;
  • Internet Explorer admite el formato EOT;
  • Firefox 3.6 es compatible con el nuevo WOFF (nueva propuesta de formato para un archivo de fuente web);
  • Google Chrome y Safari de iPhone permiten usar archivos SVG en @font-face;

contestado el 03 de mayo de 12 a las 16:05

Respuesta muy útil, pero ¿cuál es la parte específicamente inherente a Chrome? - Carlo

@Carlo, acabo de agregar una sección editada con un tipo de fuente más específico para cada navegador... - Zuul

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.