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

fuentes html para web

Question

Cuando agrego Google web fonts usando la regla @import en mi archivo CSS, funciona bien.

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

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

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

con este:

@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, acabo de copiar el código del 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 a esto también, pero no es bueno:

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

No puedo creer que haya alguna razón por la que las fuentes web de Google no funcionen si las usamos localmente, por lo que debe haber 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

Como se indicó en los comentarios, la causa del problema fue una falta de ortografía del nombre de la fuente en la URL.

Esta es una forma de usar 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. ¿Debería almacenar localmente CSS generado por la API de Google Web Fonts?

Answer 2

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