Hacer que las fuentes de Adobe funcionen con CSS3 @ font-face en IE9

Estoy en el proceso de construir una pequeña aplicación de intranet e intento, sin suerte, usar la fuente de Adobe que compré últimamente. Como me informaron, en nuestro caso no es una violación de licencia.

Convertí las versiones de fuente .ttf / .otf a .woff, .eot y .svg, para apuntar a todos los principales navegadores. La sintaxis @ font-face que utilicé es básicamente la a prueba de balas de Font Spring :

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot');
    src: url('myfont-webfont.eot?#iehack') format('eot'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
    }

Modifiqué los encabezados HTTP (agregué Access-Control-Allow-Origin = "*") para permitir referencias entre dominios. En FF y Chrome funciona perfectamente, pero en IE9 obtengo:

CSS3111: @font-face encountered unknown error.  
myfont-webfont.woff
CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
myfont-webfont.ttf

Noté que al convertir la fuente de .ttf / .otf a .woff también obtengo un archivo .afm , pero no tengo ni idea de si es importante o no ...

¿Alguna idea de cómo resolverlo?

[Editar]: alojo mis sitios web (fuentes también, pero en un directorio y subdominio separados para contenido estático) en IIS 7.5

Solo puedo explicarte cómo solucionar el error "CSS3114".
Tiene que cambiar el nivel de incrustación de su archivo TTF.

Usando la herramienta adecuada , puede configurarlo para la inclusión instalable permitida .
Para una versión de 64 bits, verifique la respuesta de @ user22600 .

Como dijo Knu, puede usar esta herramienta , sin embargo, está compilada solo para MS-DOS. Lo compilé para Win64. Descargar .

Uso:

1. Coloque el archivo .exe en la misma carpeta que la fuente que necesita modificar

2. Navegue a ese directorio en la línea de comando

3. tipo embed fontname.fonttype, reemplazando fontname con el nombre de archivo y fonttype con la extensión, es decirembed brokenFont.ttf

4. ¡Todo listo! Tu fuente ahora debería funcionar.

Debe configurar el formato de la fuente ie a 'embedded-opentype' y no 'eot'. Por ejemplo:

src: url('fontname.eot?#iefix') format('embedded-opentype')

Recibía el siguiente error:

CSS3114: @ font-face falló la verificación de permisos de incrustación de OpenType. El permiso debe ser instalable.
fontname.ttf

Después de usar el siguiente código, mi problema se resolvió ...

src: url('fontname.ttf') format('embedded-opentype')

Gracias chicos por ayudarme!
Saludos,
Renjith.

Pruebe esto, agregue estas líneas en web.config.

<system.webServer>
  <staticContent>
     <mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
  </staticContent>
</system.webServer>

Una respuesta diferente: cuestiones legales.

Hay un par de cosas a tener en cuenta antes de hacer esto. Primero, para obtener este error, en IE, inspeccione el elemento, cambie sus pestañas y busque los errores, creo que "CSS3114" aparece en la consola.

Lo que debe comprender es que se trata de un problema de licencia. IE (juego de palabras) si está intentando cargar una fuente que causa este error, no tiene permisos en el archivo para usar la fuente, y si no tiene permiso, es muy probable que pierda un batalla legal (que es muy poco probable) por usar esta fuente de esta manera a menos que tenga la licencia. Entonces, puede, por primera vez, agradecer a IE por ser el único navegador que le dijo "no", porque al menos le permite saber que está haciendo algo cuestionable.

Dicho esto, aquí está tu respuesta:

Primero asegúrese de estar usando el mejor código en .css, vea algunas de las otras respuestas de css para eso.
Ejemplo de IE 11 css (puede funcionar en todos los navegadores modernos para IE9):

@font-face {
font-family: "QuestionableLegalFont";
font-weight: bold;
src: url('../fonts/QuestionableLegalFont.ttf') format('truetype');
}

Luego, asegúrese de tener una fuente web que funcione (probablemente ya lo sepa al ver su fuente en otros navegadores). Si necesita un convertidor de fuentes en línea, marque aquí: https://onlinefontconverter.com/

Finalmente, deshacerse del error "CSS3114". Para obtener una herramienta en línea, haga clic aquí: https://www.andrebacklund.com/fontfixer.html

Es cierto que IE9 requiere que las fuentes TTF tengan los bits de incrustación establecidos en Instalable. El generador hace esto automáticamente, pero actualmente estamos bloqueando las fuentes de Adobe por otras razones. Podemos levantar esta restricción en el futuro cercano.

Perdí mucho tiempo debido a este problema. Finalmente encontré una gran solución para mí. Antes solo usaba la fuente .ttf. Pero agregué un formato de fuente adicional .eot que comenzó a funcionar en IE.

Utilicé el siguiente código y funcionó a la perfección en todos los navegadores.

@font-face {
font-family: OpenSans;
src: url(assets/fonts/OpenSans/OpenSans-Regular.ttf), 
url(assets/fonts/OpenSans/OpenSans-Regular.eot);
}

@font-face {
font-family: OpenSans Bold;
src: url(assets/fonts/OpenSans/OpenSans-Bold.ttf),
url(assets/fonts/OpenSans/OpenSans-Bold.eot);
}

Espero que esto ayude a alguien.

Como usuario de Mac, no pude usar las herramientas de línea de comandos de MS-DOS y Windows que se mencionaron para corregir el permiso de incrustación de fuentes. Sin embargo, descubrí que puedes solucionar esto usando FontLab para configurar el permiso a 'Todo está permitido'. Espero que esta receta sobre cómo establecer el permiso de fuente en Instalable en Mac OS X también sea ​​útil para otros.

Si está familiarizado con nodejs / npm, ttembed-js es una manera fácil de configurar el indicador de "incrustación instalable permitida" en una fuente TTF. Esto modificará el archivo .ttf especificado:

npm install -g ttembed-js

ttembed-js somefont.ttf

El problema podría tener que ver con la configuración de su servidor; es posible que no envíe los encabezados correctos para los archivos de fuentes. Eche un vistazo a la respuesta dada para la pregunta IE9 bloquea la descarga de la fuente web de origen cruzado .

EricLaw sugiere agregar lo siguiente a su configuración de Apache

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "http://mydomain.com"
    </IfModule>
</FilesMatch>

Para todos los que reciben el error: "la versión de la tabla debe ser 0, 1 o y es hexadecimal: 003" cuando utilizo ttfpatch, he compilado incrustación para 64 bits. No he cambiado nada, solo agregué libs de necesidad y compilé. Uso bajo su propio riesgo.

Uso: ConsoleApplication1 font.ttf

http://www.mediafire.com/download/8x1px8aqq18lcx8/ConsoleApplication1.exe

Si desea hacer esto con un script PHP en lugar de tener que ejecutar el código C (o si está en una Mac como yo y no puede ser analizado compilando con Xcode solo para esperar un año para que se abra), aquí hay un Función PHP que puede usar para eliminar los permisos de incrustación de la fuente:

function convertRestrictedFont($filename) {
    $font = fopen($filename,'r+');
    if ($font === false) {
        throw new Exception('Could not open font file.');
    }

    fseek($font, 12, 0);

    while (!feof($font)) {
        $type = '';
        for ($i = 0; $i < 4; $i++) {
            $type .= fgetc($font);
            if (feof($font)) {
                fclose($font);
                throw new Exception('Could not read the table definitions of the font.');
            }
        }
        if ($type == 'OS/2') {
            // Save the location of the table definition
            // containing the checksum and pointer to the data
            $os2TableDefinition = ftell($font);
            $checksum = 0;

            for ($i = 0; $i < 4; $i++) {
                fgetc($font);
                if (feof($font)) {
                    fclose($font);
                    throw new Exception('Could not read the OS/2 table header of the font.');
                }
            }

            // Get the pointer to the OS/2 table data
            $os2TablePointer = ord(fgetc($font)) << 24;
            $os2TablePointer |= ord(fgetc($font)) << 16;
            $os2TablePointer |= ord(fgetc($font)) << 8;
            $os2TablePointer |= ord(fgetc($font));

            $length = ord(fgetc($font)) << 24;
            $length |= ord(fgetc($font)) << 16;
            $length |= ord(fgetc($font)) << 8;
            $length |= ord(fgetc($font));

            if (fseek($font, $os2TablePointer + 8, 0) !== 0) {
                fclose($font);
                throw new Exception('Could not read the embeddable type of the font.');
            }

            // Read the fsType before overriding it
            $fsType = ord(fgetc($font)) << 8;
            $fsType |= ord(fgetc($font));

            error_log('Installable Embedding: ' . ($fsType == 0));
            error_log('Reserved: ' . ($fsType & 1));
            error_log('Restricted License: ' . ($fsType & 2));
            error_log('Preview & Print: ' . ($fsType & 4));
            error_log('Editable Embedding: ' . ($fsType & 8));
            error_log('Reserved: ' . ($fsType & 16)); 
            error_log('Reserved: ' . ($fsType & 32));
            error_log('Reserved: ' . ($fsType & 64));
            error_log('Reserved: ' . ($fsType & 128));
            error_log('No subsetting: ' . ($fsType & 256));
            error_log('Bitmap embedding only: ' . ($fsType & 512));                         
            error_log('Reserved: ' . ($fsType & 1024));
            error_log('Reserved: ' . ($fsType & 2048));
            error_log('Reserved: ' . ($fsType & 4096));
            error_log('Reserved: ' . ($fsType & 8192));
            error_log('Reserved: ' . ($fsType & 16384));
            error_log('Reserved: ' . ($fsType & 32768));

            fseek($font, ftell($font) - 2);

            // Set the two bytes of fsType to 0
            fputs($font, chr(0), 1);
            fputs($font, chr(0), 1);

            // Go to the beginning of the OS/2 table data
            fseek($font, $os2TablePointer, 0);

            // Generate a new checksum based on the changed 
            for ($i = 0; $i < $length; $i++) {
                $checksum += ord(fgetc($font));
            }
            fseek($font, $os2TableDefinition, 0);
            fputs($font, chr($checksum >> 24), 1);
            fputs($font, chr(255 & ($checksum >> 16)), 1);
            fputs($font, chr(255 & ($checksum >> 8)), 1);
            fputs($font, chr(255 & $checksum), 1);

            fclose($font);

            return true;
        }
        for ($i = 0; $i < 12; $i++) {
            fgetc($font);
            if (feof($font)) {
                fclose($font);
                throw new Exception('Could not skip a table definition of the font.');
            }
        }
    }

    fclose($font);

    return false;
}

Asegúrese de hacer una copia de seguridad de su archivo de fuente antes de ejecutar este código y no me culpe si se corrompe.

La fuente original en C se puede encontrar aquí .

Puedes resolverlo siguiendo el código

@font-face {
  font-family: 'Font-Name';
  src: url('../fonts/Font-Name.ttf');
  src: url('../fonts/Font-Name.eot?#iefix') format('embedded-opentype');
}

Encontré el eotarchivo se debe poner más allá ttf. Si está debajo ttf, aunque la fuente se muestra correctamente, IE9 aún arrojará un error.

Recomendar:

@font-face {
  font-family: 'Font-Name';
  src: url('../fonts/Font-Name.eot?#iefix') format('embedded-opentype');
  src: url('../fonts/Font-Name.ttf')  format('truetype');
}

No recomendar

@font-face {
  font-family: 'Font-Name';
  src: url('../fonts/Font-Name.ttf')  format('truetype');
  src: url('../fonts/Font-Name.eot?#iefix') format('embedded-opentype');
  }

Probé la herramienta ttfpatch y no funcionó conmigo. Internet Exploder 9 y 10 todavía se quejaron.

Encontré esta buena esencia de Git y resolvió mis problemas. https://gist.github.com/stefanmaric/a5043c0998d9fc35483d

Simplemente copie y pegue el código en su CSS.

Recientemente encontré este problema con las fuentes .eot y .otf que producen los errores CSS3114 y CSS3111 en la consola al cargar. La solución que funcionó para mí fue usar solo formatos .woff y .woff2 con un respaldo de formato .ttf. Los formatos .woff se usarán antes que .ttf en la mayoría de los navegadores y no parecen desencadenar el problema de permisos de incrustación de fuentes (css3114) y el problema de formato incorrecto de nombres de fuentes (css3111). Encontré mi solución en este artículo extremadamente útil sobre el tema CSS3111 y CSS3114 , y también leí este artículo sobre el uso de @ font-face .

nota: esta solución no requiere volver a compilar, convertir o editar ningún archivo de fuente. Es una solución de solo CSS. La fuente con la que probé tenía versiones .eot, .otf, .woff, .woff2 y .svg generadas para él, probablemente de la fuente original .ttf que produjo el error 3114 cuando lo probé, sin embargo, el .woff y. Los archivos woff2 parecían ser inmunes a este problema.

Esto es lo que me funcionó con @ font-face:

@font-face {
  font-family: "Your Font Name";
  font-weight: normal;
  src: url('your-font-name.woff2') format('woff2'),
       url('your-font-name.woff') format('woff'),
       url('your-font-name.ttf')  format('truetype');
}

Esto fue lo que provocó los errores con @ font-face en IE:

@font-face {
  font-family: 'Your Font Name';
  src: url('your-font-name.eot');
  src: url('your-font-name.eot?#iefix') format('embedded-opentype'),
       url('your-font-name.woff2') format('woff2'),
       url('your-font-name.woff') format('woff'),
       url('your-font-name.ttf')  format('truetype'),
       url('your-font-name.svg#svgFontName') format('svg');
}

Esto funciona para mi:

@font-face {
  font-family: FontName;
  src: url('@{path-fonts}/FontName.eot?akitpd');
  src: url('@{path-fonts}/FontName.eot?akitpd#iefix') format('embedded-opentype'),
    url('@{path-fonts}/FontName.ttf?akitpd') format('truetype'),
    url('@{path-fonts}/FontName.woff?akitpd') format('woff'),
    url('@{path-fonts}/FontName.svg?akitpd#salvage') format('svg');
}