Fuentes web de Google almacenadas localmente versus fuente en línea

Question

Cuando agrego las fuentes web de Google utilizando la regla @import en mi archivo CSS, funciona bien.

Pero cuando descargo esa fuente y la almacena localmente en mi servidor y luego dirijo la regla @ font-face a mi propia máquina, no funciona.

Así que lo que hice fue reemplazar esta línea, en mi archivo css/fonts.css:

@import url(http://fonts.googleapis.com/css?family=Michroma); 

con esto:

@font-face { 
font-family: 'Michroma'; 
font-style: normal; 
font-weight: 400; 
src: url(http://localhost/xampp/mysite/css/fonts/michroma/micrhoma.woff) format('woff'); 
} 

En otras palabras, He copiado el código de el googleapi para esa fuente. Y guardé el archivo de fuente (.woff) en la ruta de arriba (he vuelto a verificar, de hecho está allí).

traté de editar la url para esto también, pero no es bueno:

src: url(fonts/michroma/michroma.woff) format('woff'); 

No puedo creer que haya ninguna razón por la cual las fuentes web de Google no funcionarían si los usamos de forma local, por lo que debe algo mal con lo que estoy haciendo. Pistas? ¿No es así como definimos nuestras propias caras de fuentes de todos modos? (Nunca lo he intentado antes).

Answer 1

en una sola fuente, no se necesitan las comillas para el apellido de la fuente. deberías eliminarlo y ejecutarlo funcionará bien. familia de fuentes: Michroma;

Answer 2

Como se indica en los comentarios, la causa del problema fue un error ortográfico del nombre de la fuente en la URL.

Esta es una forma de utilizar las fuentes de Google localmente. La forma correcta es usar URL relativas como fonts/michroma/michroma.woff y no http: URLs con localhost (requerirían que ejecutaras un servidor HTTP en tu computadora).

Sin embargo, no funcionaría en los navegadores que no son compatibles con el formato WOFF (en este caso). Generalmente, usar Google Fonts como hospedado remotamente es mejor, ya que saben cómo servir diferentes formatos de fuente para diferentes navegadores. Cf. a Should I locally store CSS generated by the Google Web Fonts API?