Problemas con las fuentes y el servidor 
Author: Julian V.Recientemente hemos cambiado el servidor donde se aloja nuestra pagina web. No he tenido ningún problema hasta que en un reciente lavado de cara de la página, he cambiado la tipografía que usaba hasta ahora (una opción para cambiarla toda de una vez no iria mal). El caso es que al subir la página con la tipografía nueva, los menús si que tienen la fuente que debereía, pero el resto de bloques y textos de la página aparecen con otro tipo de fuente que no es la que yo tengo puesta en el programa.
He hablado con la empresa del servidor (utiliza linux, por si sirve de algo), y me dicen que eso es cosa mia, y que la fuente de la página debo de aportarla yo, que si estuviera utilizando dream weaber si sabría como debo de hacerlo, pero al desconocer el programa no tiene ni idea. ¿Alguna idea?
Hola Julian.
Por favor ten en consideración lo siguiente:
El script y el uso:
@font-face sólo requiere unas cuantas líneas de código CSS, sin usar herramientas externas ni nada más. Lo primero que se necesita es tener el archivo de la fuente, en este caso tendremos la fuente Quicksand.otf, que descargamos y subimos a nuestro servidor. El código para poder usarla es:
@font-face {
font-family: Quicksand;
src: url('fonts/Quicksand.otf');
}
Este código le da un identificador a la fuente para poder ser usada en el resto de nuestro CSS. Esa es la primera línea, la segunda establece la URL donde está el archivo con la fuente, en este caso en nuestro servidor en la carpeta fonts. A partir de aquí puedes usar la fuente donde se quiera como se haría normalmente:
font-family: Quicksand, Georgia, “Times New Roman”, serif;
Recordad que el navegador usará la primera fuente, y si esta no se puede usar por cualquier motivo, lo intentará con las siguientes.
Esto debería ser todo lo necesario para poder usar cualquier tipo de fuentes en nuestra web, pero no es así. Todos los navegadores modernos entienden el comando @font-face, pero el problema es que no todos los navegadores trabajan con los mismos tipos de archivos de fuentes. Unos, como Firefox, entienden el formato .otf, mientras que Internet Explorer entiende .eot. Además, cada navegador o sistema operativo puede mostrar las fuentes de forma un poco distinta unos de otros. Ante esta disparidad hay que configurar nuestro CSS con @font-face con una serie de parámetros en mente:
@font-face {
font-family: 'Quicksand';
src: url('Quicksand.eot'); /* IE9 Compat Modes */
src: url('Quicksand.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('Quicksand.woff') format('woff'), /* Modern Browsers */
url('Quicksand.ttf') format('truetype'), /* Safari, Android, iOS */
url('Quicksand.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Esto lo que hace básicamente es hacer que IE comprenda la primera línea y no siga cargando formatos. Para los demás navegadores, cada uno entenderá el suyo y no cargará la fuente correspondiente.
Referencias:
Revisa, prueba y comenta.
Saludos
Jorge M.
--------------------------------------------------------------------------------------