@font-face: definir diferentes tipografias mediante css

tipografia diseño web

Normalmente no todos los ordenadores tienen las mismas fuentes instaladas (puede que algunas si coincidan, pero la mayoría no), pudiendo verse de manera muy diferente un diseño. En otro post les comenté como importar fuentes a través de “Google Font Directoy” para que se vieran las mismas independientemente de que estuvieran instaladas. En esta ocasión, les explicaré como hacerlo a través de la propiedad css @font-face.

Lo primero es tener la fuente en nuestro servidor y copiar la dirección de su localización. Con esto vamos a nuestra hoja de estilos y la editamos de la siguiente manera:

@font-face {font-family: lobster; src: url('../fonts/Lobster.otf');}

Nótese que la fuente que estamos utilizando tiene el nombre de Lobster.

Si bien en otros lugares se puede encontrar esta propiedad definida en mayor medida, hoy en día no tiene demasiado sentido pues prácticamente todos los navegadores aceptan fuentes libres (otf) y TrueType (ttf) (esto a excepción de versiones antiguas de Internet Explorer, que ya va siendo hora …).

Consultor Marketing Digital

Deja un comentario