Si eres nuevo en esto de diseñar sitios web, tal vez te estés preguntando: “¿Por qué tengo que limitarme a ese pequeño conjunto de fuentes?.
Bueno, debes saber que los navegadores pueden utilizar sólo las fuentes instaladas en cada equipo, lo que significa que la persona que visita tu sitio web podrá ver solamente las fuentes que has usado, si están presentes en el suyo.
A continuación algunos ejemplos de cómo ver las fuentes elegidas al ver ru sitio web.
La propiedad de CSS2 “@font-face”
De todos modos aún entonces los navegadores diferentes a Explorer fueron reticentes a utilizar esta etiqueta debido a que había que hacerlo obligatoriamente con formato .EOT (propiedad de Microsoft). Hasta que por fin, con la llegada del CSS3, ya se pudo incrustar tipos como el TTF o el OTF.
Su forma de uso es sencilla. En la hoja de estilos CSS hay que colocar lo siguiente (la url variara en vuestro caso):
a) Para formatos TTF
@font-face {
font-family: nombre-De-Mi-Fuente;
src: url(url/de/mi/fuente/fuente.ttf) format(‘truetype’);
}
b) Para formato OTF
@font-face {
font-family: nombre-De-Mi-Fuente;
src: url url/de/mi/fuente/fuente.otf) format(‘opentype’);
}
c) Para formato SVG
font-face {
font-family: nombre-De-Mi-Fuente;
src: url (‘url/fuente.svg#Identificador-de-fuente’) format(‘svg’);
}
d) Para formatos EOT:
@font-face {
font-family: nombre-De-Mi-Fuente;
src: url url/de/mi/fuente/fuente.eot);
}
e) Para varios formatos a la vez, por ejemplo OTF + SVG:
@font-face {
font-family: ‘nombre-de-mi-fuente’;
url(‘fuente.otf’) format(‘opentype’),
url(‘fuente.svg#Fuente-identificador’) format(’svg’);
}
Y una vez incrustada la fuente, ya podemos usarla normalmente como una fuente de las denominadas “seguras”:
.headder_text{
font-size:19px;
font-family: nombre-de-mi-fuente, Tahoma;
}
Otro método
Finalmente este puede ser el texto más apropiado para jalar el tipo de fuente para nuestra web. De igual manera en nuestro CSS agregamos al inicio:
@import url(http://fonts.googleapis.com/css?family=Oswald);