¿Por qué no se carga la fuente @font-face desde una hoja de estilos externa o interna?

  • Autor Autor Usuario eliminado 174876
  • Fecha de inicio Fecha de inicio
U

Usuario eliminado 174876

Hola betas,

Alguien sabe por qué motivo cuando agrego una fuente externa alojada en mi servidor local (por ejemplo, "css/fonts/SansSourcePro.ttf"), no se carga directamente desde la hoja de estilos externa ni tampoco desde la hoja de estilos interna???

Antes de nada, deciros que no tiene nada que ver el orden del cascading de mis hojas de estilos, pues eso ya lo tengo comprobado.
Ni tampoco las preferencias entre hojas de estilos externas, internas e inline.
Ni tampoco la estructura de la regla css que estoy utilizando:

Insertar CODE, HTML o PHP:
@font-face {
                font-family: "source";
                src: url(css/fonts/SourceSansPro.ttf) format("truetype");
            }

He probado a utilizar la propiedad !important dentro de la hoja de estilos externa e interna, pero tampoco funciona.

El único modo que he encontrado es aplicando el estilo en línea.
Pero claro, estarán de acuerdo conmigo que es un coñazo aplicar un estilo inline a cada una de las partes que estructuran mi página web.

Simplemente os escribo porque quiero saber si la propiedad @font-face, sólo funciona en el caso de los estilos en línea, o es que en verdad hay algo que estoy haciendo mal (o desconozco por completo) y no me he dado cuenta de ello hasta el momento.

Creo sinceramente, que estoy utilizando un sans-serif como fuente alternativa, y css aplica prioridad por defecto directamente a aquellas fuentes que ya están descargadas en el ordenador, antes que aquellas otras que tienen que descargarse de la web o del servidor.

No sé... Uds. qué opinan??
Les ha pasado algo cómo esto alguna vez?
 
Insertar CODE, HTML o PHP:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro"> 
<style>
body {font-family: 'Source Sans Pro'}
</style>

Yo lo pondría en interna como te he puesto arriba. Aunque también puedes ponerla externa con @import, ya como tu quieras..

Y si no le has puesto que sans-serif sea la alternativa, no te esta usando ninguna tuya, simplemente ves la que el navegador pone por defecto. Para que te use la alternativa en caso de que la primera no funcione pon , y otra fuente.

Insertar CODE, HTML o PHP:
body {font-family: 'Source Sans Pro', sans-serif, monospace}

En Google Fonts te viene bastante fácil y te da los códigos ya para poner. A parte de que puedes ver un montón de fuentes más y personalizarlas un poco.
 
Gracias por el aporte, +trafalgarmeow.

Ya dí con la solución hace unos días.
Era por un problema de herencias que venía arrastrando desde la hoja de estilos externa "reset.css".

De todos modos, tendré más cuidadín para la próxima.

Un saludo, y gracias por compartir tus conocimientos.
 
Atrás
Arriba