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


132

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


16
+1 para una pregunta fina, inteligente y bien redactada con toda la tarea hecha. ¡Obtenemos estos muy raramente en estos días!
Pekka

De hecho, es una pregunta bien planteada, pero lamentablemente, un duplicado.
Joseph Earl

1
No, seguramente no es un duplicado, ya que en las fuentes que no son de Adobe las soluciones que encontré funcionan perfectamente. Lo que difiere es que no es el caso con las referencias de fuentes entre dominios, supongo: me aparece "@ font-face encontró un error desconocido" con .woff font en lugar de "@ font-face falló la solicitud de origen cruzado" en otro mencionado casos.
Piotr Szmyd

Tuve problemas con esta línea después de cambiar las opciones de incrustación: al url('myfont-webfont.eot?#iehack') format('eot'), eliminarla se resolvió el último error (error desconocido).
Jonathan DeMarks

Respuestas:


95

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 .


11
Como nota para ttfpatch, use fsType = 0.
Precio de Collin el

11
ttfpatch no funcionó para mí. Error: la conversión de la tabla debe ser 0, 1 o y es hexadecimal: 003
Don Rolling

11
incrustar funciona bien. Simplemente descargue la fuente y compile ... esto es StackOverflow, ¿verdad? Es solo un archivo. :-) Para VS2010 necesita agregar:#include <string.h>
Jonathan DeMarks

3
@ JonathanDeMarks: Gracias por el aliento, ttfpatch tampoco funcionó para mí, pero recompilar embed.c por 64 bits definitivamente fue el truco.
Peter Majeed

44
Para aquellos que no son auténticos con la compilación de programas C en Windows, es muy sencillo. Siga esta guía de Microsoft: msdn.microsoft.com/en-us/library/bb384838.aspx
lee_mcmullen

36

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.


Gracias por el informe. Fijo.
user22600

Realmente me ayuda mucho. mediante el uso de Win64 bit exe.
imdadhusen

Dios mío, eso es asombroso. Lado no para todos: use la línea de comandos de Windows y no un reemplazo como GIT BASH, generalmente prefiero bash, no funciona aquí.
Halter

voila! ¡¡brillante!!
oldboy

33

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

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

Gracias, pero ese no fue el caso. Se trataba de incrustar permisos en la fuente misma.
Piotr Szmyd

Esto funcionó para Firefox y Chrome (IE funcionaba de todos modos). ¡Gracias!
Dmitri Mogilevski

12

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.


Creo que su solución funciona para algunas familias de fuentes pero no para otras. Depende del nivel de permiso de incrustación de la fuente. Por ejemplo, esto no funcionará para la fuente Abadi
Philip007

Sí, esto no hizo absolutamente ninguna diferencia con mis archivos .ttf, todavía recibía el "Permiso debe ser instalable". error. Lo que solucionó este problema fue ejecutar el archivo .exe de Christian (en otra parte de esta página) para modificar los archivos .ttf. Después de hacer esto, EI11 sería mostrar las fuentes .ttf en mi página web correctamente.
Mike Gledhill

9

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

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

No creo que sea el mismo error que ha informado, pero será necesario si está sirviendo .woffs de IIS, sí. Alternativamente, puede agregar una clave de registro para .woff en HKLM \ Software \ Classes y establecer el valor de "Tipo de contenido". Sin embargo, Wikipedia dice que el tipo correcto esapplication/font-woff .
Rup

De hecho, es una cosa diferente. Tuve esta entrada: el problema era con una fuente ya descargada que no se podía abrir en IE debido a los permisos integrados.
Piotr Szmyd

Estaba haciendo desarrollo en un entorno Apache, y cuando moví mis archivos de fuentes a un servidor Windows IIS, esto solucionó mi problema.
Samuel Cook

8

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


La herramienta en línea me lo arregló. ¡Gracias!
James Hibbard

7

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.


7

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.


4

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.


"No pude usar las herramientas de línea de comandos de MS-DOS y Windows": aunque se proporciona el código fuente, ¿esperaría que solo se compilara en Mac?
Rup

Lo siento, quería decir: ser un usuario mimado de OS X Finder.
Buijs

4

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

Gracias, esto funcionó muy bien para las fuentes .otf que me estaban causando problemas en IE11.
J Sprague

3

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>

Pero este no es el mismo caso. He leído esa publicación y ya probé la solución que proporcionó. El problema es específicamente con las fuentes de Adobe. Intenté usar kits de fuentes de Font Squirrel y funcionan perfectamente en todos los navegadores (IE9 también). Cuando trato de usar las fuentes de Adobe (convertidas a los formatos apropiados) de la misma manera - IE9 grita con errores ...
Piotr Szmyd

Y, lo que olvidé decir (editaré mi pregunta), estoy ejecutando mis sitios web con IIS 7.5.
Piotr Szmyd

¿Son fuentes tipo 1 por casualidad?
Joseph Earl

Todas estas son fuentes de un solo archivo .ttf (TrueType). Pero de alguna manera obtengo un archivo .afm (Adobe Font Metrics) cuando convierto al formato .woff a través de onlinefontconverter.com. No tengo idea de qué hacer con eso?
Piotr Szmyd


2

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í .


Esto funciona y ahora debería ser la respuesta número 1. Es una pena que hasta ahora tenga que escalar para superar las respuestas anteriores.
Ganso

Muchas gracias @Goose! Originalmente escribí esto para mi trabajo, pero el código fue descartado y reemplazado, por lo que sigue vivo en Stack Overflow. Proporcionar código C para un problema de aplicación web definitivamente no es ideal.
NobleUplift

@ Goose prefiero el código C. Siempre. Por lo tanto, es una cuestión de gustos y es por eso que esta respuesta es equivalente a la respuesta. Para su información, también puede usar CGI para implementar el código C en su sitio web.
71GA

0

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');
}

No, no funcionará. Mi caso era estrictamente sobre las fuentes que no permitían incrustar por diseño (pero con licencia que lo permite). Entonces no se trata de cómo lo incrusto. Verifíquelo con una fuente TTF que prohíba explícitamente la inserción en la web y comprenderá mi problema.
Piotr Szmyd

0

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');
  }


0

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');
}

0

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');
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.