@ font-face o como usar cualquier tipografía en tu sitio web

[ad#adconte-1]

FATA DIGITAL

El titulo que encabeza este articulo no es una imagen esta creada con @ font-face. Bueno esta vez les hablaremos de @font-face, el cual muchos seguramente ya conoces y mucos tal vez por lo cual explicaremos su función y su forma de usar.

@font-face permite a los desarrolladores especificar las fuentes en línea para mostrar texto en sus páginas web. Al permitir a los desarrolladores proporcionar sus propias fuentes, @font-face elimina la necesidad de depender del número limitado de fuentes que el usuarios tenga instalado en su equipo.

Es decir con podrás hacer llamar a cualquier fuente que tengas previamente en tu servidor y poder usarla en tu pagina web sin la necesidad de que esa fuente este instalada en el equipo del usuario.

Para utilizar las fuentes web, cada familia de fuentes debe ser declarada mediante la etiqueta @font-face, por ejemplo, para usar la fuente shocktherapy que es el tipo de fuente que tenemos en la cabeza de este articulo, de un estilo de halloween, tendríamos que hacer lo siguiente:

@font-face {
font-family:'shock';
src: url("../fonts/shocktherapybb_ital.ttf") format('truetype');
}

En la primera linea le damos un nombre a la fuente que vamos a usar, en el ejemplo es “shock”

Y en la segunda linea asignamos la ruta en donde se encuentra nuestra fuente y nuestro formato de fuente en esta caso es format(‘truetype’)

Así de facil y sencillo es usar la etiqueta @font-face para tus proyectos web

Pero que hacer si nuestra pagina es mostrada en Internet Explorer, como siempre este es nuestro dilema y nuestro eterno dolor de cabeza.

En la red puedes encontrar varias formas para resolver este problema, aqui mostraremos la mas sencilla y practica.

Para comenzar y por desgracia nuestra fuente debe estar en formato .eot ya que Internet Explorer no acepta formatos .ttf, al final del articulo mostraremos la forma de convertir las fuentes a .eot, mientras pasemos al código.

@font-face{

/*hack para IE 7 y 8 */
#font-family:'shock';
#src: url("../fonts/shocktherapybb_ital.eot") ;

/*hack para IE 6 */
_font-family:'shock';
_src: url("../fonts/shocktherapybb_ital.eot") ;

}

Como verán el estilo es exactamente igual a excepción de dos cosas:

1.- Noten que el formato de la fuente esta .eot

2.- Noten que antes de cada linea de código hay una almohadilla “#” o un guión bajo “_” esto es para decirle a IE que aplique este estilo, es decir al agregar estos elementos solo IE podrá leer esta orden, ningún otro explorador leerla esta orden.

El código entero seria así:

@font-face{
font-family:'shock';
src: url("../fonts/shocktherapybb_ital.ttf") format('truetype');

#font-family:'shock';
#src: url("../fonts/shocktherapybb_ital.eot") ;

_font-family:'shock';
_src: url("../fonts/shocktherapybb_ital.eot") ;

}

Repito esta forma es la más facil y funcional de hacerlo, como ya dije habra otras formas de hacerlo, aqui solo te mostramos una más.

Si tienes alguna duda o comentario no dudes en dejar un comentario.

En el siguiente enlace te diremos como pasar tus fuentes a .eot

También te puede interesar

Comments