@ font-face funciona bien en localhost pero NO en AppHarbor

Tengo un problema al alojar mi aplicación en un AppHarbor. Tengo una aplicación básica sobre .net MVC 3 .. En esta aplicación he usado la propiedad @ font-face para mostrar contenido en fuentes personalizadas:

@font-face {
font-family: facefont;
src: url("raleway_thin.otf");
} 
body {    
font-size: .85em;
font-family: "facefont", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
color: #696969;
}

Cuando ejecuto esta aplicación a través de mi servidor de desarrollo en loaclhost, todo funciona bien y el contenido se muestra en la fuente personalizada. Pero cuando presioné mi aplicación web sobre AppHarbor aquí:

testapp sobre AppHarbor

Ya no se muestra el contenido en la fuente personalizada que he usado en .css. Estoy confundido porque estoy usando el mismo navegador (Chrome 15.0) para ver ambos, pero dan resultados diferentes.

Amablemente ayuda.


Acabo de resolver que esto está sucediendo solo con los archivos de fuentes [* .otf, * .ttf] .. Puse una imagen en la misma carpeta y se agregó perfectamente, pero nuevamente no pudo obtener el archivo de fuente y mostrar 404 sobre eso.


También hecho con la configuración de mimeTypes:

<staticContent>
        <mimeMap fileExtension=".otf" mimeType="font/otf" />
        <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
    </staticContent>

preguntado el 08 de noviembre de 11 a las 12:11

Revisé su paeg usando Firebug, parece que el archivo de fuente no se ha vinculado correctamente, verifique sus rutas. -

@Kyle Sevenoaks: Gracias por responder, pero ¿funciona bien aquí en mi navegador sobre localhost? y la ruta parece correcta ya que la hoja de estilo y el archivo de fuentes están en el mismo directorio. -

Consulte las herramientas de desarrollo de Firebug o Chrome. Firebug dice que hay un área en el rango de 400-500 de errores, por lo general es un 404. -

@Kyle Sevenoaks: sí, tu rito es 404, pero se da la misma ruta para la hoja de estilo y la fuente y ambas están en el mismo directorio, entonces, ¿cómo puede encontrar el .css pero no la fuente ... ne idea por favor? :s -

En CSS, las rutas son relativas a la posición del documento CSS. Intente mover la fuente a otro directorio y cambie la ruta en consecuencia. -

6 Respuestas

Para poder implementar fuentes en formato ".woff" en Appharbor, tuve que hacer dos cosas:

1: Incluir la fuente en mi proyecto de Visual Studio, asegurándome de que la propiedad "Construir" esté configurada en "Contenido" (como se describe anteriormente en @Korayem).
2: agregue la siguiente configuración a Web.config:

<system.webServer>
    <staticContent>
        <remove fileExtension=".woff"/>
        <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
    </staticContent>
</system.webServer>

Respondido el 15 de diciembre de 11 a las 06:12

Su hoja de estilo no está disponible en la ubicación que su página hace referencia a ella. Esta URL muestra un 500: http://testapp-216.apphb.com/Content/Site.css

Debe verificar que AppHarbor implemente los archivos de fuentes y .css relevantes. Esto se hace más fácilmente descargando el paquete de salida de compilación de AppHarbor y verificando su contenido. Si no está allí, lo más probable es que deba establecer "Acción de compilación" en "Contenido" en la referencia del archivo del proyecto.

También es importante que los tipos MIME estén configurados correctamente.

(descargo de responsabilidad, soy cofundador de AppHarbor)

Respondido el 20 de enero de 14 a las 22:01

oh, este es un nuevo problema jst con la última compilación, ahora no reconoce ningún archivo .css y .js ... ¡déjame intentar algo para solucionarlo! - Maven

css problema resuelto, ahora está vinculado, pero el problema de la fuente aún existe. amablemente echa un vistazo. - Maven

¿Ha verificado que AppHarbor efectivamente haya implementado el archivo de fuente en el servidor? - friismo

¿Cómo puedo verificar eso? ¿Puedes ayudar a un lil? Maven

Puede descargar el resultado de la compilación desde la página de compilación en AppHarbor. Esto es lo que implementamos en los servidores de aplicaciones. - friismo

El problema es que el archivo de fuente .otf no se sirve desde el servidor de AppHarbor ya que no hay ningún tipo MIME configurado que especifique cómo servirlo.

Vea aquí cómo agregar tipos MIME usando Web.config: http://www.iis.net/ConfigReference/system.webServer/staticContent/mimeMap

El tipo MIME que necesita configurar es font/otf

Algo como:

<mimeMap fileExtension=".otf" mimeType="font/otf" />

respondido 08 nov., 11:19

Thnx, ¿puede informarme un poco sobre cómo puedo configurar el tipo MIME especificando cómo servirlo? - Maven

¡sin suerte! He actualizado mis preguntas con los cambios que hice en Web.config pero el problema sigue ahí. - Maven

Su hoja de estilo se encuentra en /Content/Site.css y está haciendo referencia a sus fuentes en este archivo con "raleway_thin.otf" que es relativo al archivo CSS. Por lo tanto, se espera que exista esta ruta de archivo /Content/raleway_thin.otf

No estoy familiarizado con Appharbour, pero asegúrese de que todos sus archivos distingan entre mayúsculas y minúsculas (es decir, causa problemas de Windows a Unix / Linux).

De lo contrario, ¿el servidor web evita que se carguen determinadas extensiones de archivo desde el directorio en cuestión? En apache, puede decirle qué tipos de archivos pueden usarse en un directorio.

Habiendo dicho que 404 significa tu URL http://testapp-216.apphb.com/Content/raleway_thin.otf no existe

respondido 08 nov., 11:19

sí, la fuente estaba en el mismo directorio 'Contenido'. La he cambiado ahora para ver que sucede algo, pero todavía está atascado. src: url("font/raleway_thin.otf"); - Maven

Asegúrate de que el archivo Acción de construcción se establece a Mi contenido en Visual Studio, de lo contrario no se devolverá establecer la acción de construcción en el contenido

Trabajó para mí en AppHarbor

Respondido el 12 de diciembre de 11 a las 22:12

  1. Implementar la solución @Lloyd.
  2. Se recomienda agregar todos los archivos relacionados con fuentes a los tipos de mime, no solo .woff

árbitro. http://geekswithblogs.net/JayantSharma/archive/2012/08/26/adding-mimetype-in-web.conifg-for-html5.aspx

Respondido 06 Feb 13, 00:02

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