¿No aparece la fuente elegida al ver tu página web?

Tipo de fuente par nuestra webSi 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.


Publicidad

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);

 


Publicidad

(Hoy 1 visitas, y 242.032 visitas a la web)

Otros enlaces interesantes

Temas relacionados

¿Aún no está suscrito al blog?

Suscríbase a nuestro feed y recibe las publicaciones en tu email gratis:

ESCRIBE UN COMENTARIO