Cargar fuente externa en una Web con CSS3

wp-logo

Estas es nota rápida que me quiero dejar por aquí para tenerla a mano ya que es una tarea que si bien es cierto que no requiero a diario esto mismo hace que se me olvide como llevarla a cabo con facilidad, por lo que espero que no se me escape de aquí.

Igualmente espero que os sea de ayuda, la ventaja de esto es que la fuente se descarga sobre el cliente pero requiere por otro lado al menos CSS2, al menos así vienen reflejado en la nota que tengo yo por aquí, ya sin más dejo el código que supongo que será suficientemente descriptivo y claro.


1 @font-face {
2 font-family: "Robson Celtic";
3 src: url("https://websenior/fonts/rob-celt")
4 }
5 h1 { font-family: "Robson Celtic", serif }

Y bueno amigos, espero que el día que nos haga falta nos acordemos que está por aquí!!

Un saludo.

Información adicional aportada por “El primo”
Un par de detalles:
– la regla font-face llegó en CSS3
– Es recomendable incluir la fuente en varios formatos ya que, como de costumbre, cada navegador tiene sus preferencias. Para ver una tabla de compatibilidad soporte font-face
La manera ideal de incluir la fuente sería:

@font-face {
font-family: ‘Minion Pro’;
src: url(‘css/minion_pro/minion_pro.eot’);
src: url(‘css/minion_pro/minion_pro.eot?#iefix’) format(’embedded-opentype’), url(‘css/minion_pro/minion_pro.svg#Minion Pro’) format(‘svg’), url(‘css/minion_pro/minion_pro.woff’) format(‘woff’), url(‘css/minion_pro/minion_pro.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;}

Breve y fácil de recordar 😛

Sin categoría

Deja una respuesta