Fuentes personalizada en CSS3 con @font-face

@font-face de CSS3 nos abre el camino para una mejor personalización de nuestra web por medio de las fuentes. Lo que hace esta regla @font-face es enlazar la fuente en defecto desde el servidor donde se encuentra la web hasta el navegador del usuario, igual a lo que pasa con las imágenes. Lo que hace es seguir el enlace de la fuente y descargarla a la cache del navegador para que ese computador pueda usar esta fuente en la web en cuestión, cualquier computador no importa que este no tenga este tipo de fuente instalada podrá estilizar la fuente que utilizamos en la web.

Esta regla de @font-face ya había sido implementada en CSS2 en el año 1998, luego en CSS2.1 fue eliminada y ahora en CSS3 fue consolidada y consigue soporte para la mayoría de los navegadores web.

Ahora si podemos decir que los diseñadores de páginas web no pueden verse limitados en el asunto de las fuentes para las paginas, ya que esto nos abre un abanico de posibilidades y nos libera de el uso del grupito de fuentes que tenían monopolizada el mundo web.

esta es la sintaxis básica:

Pero vamos a lo práctico, veamos su uso.

Ya con esta regla estamos en capacidad de utilizar la fuente en cualquier cabecera o párrafo por medio de una clase o div.

Para utilizar la fuente en cualquier elemento solo tenemos que aplicar la propiedad font-family al elemento

Bueno, esto no esto no es todo.

Hay que saber que no todos los tipos de fuentes son bien recibidos por los navegadores, al igual que pasa con los videos que necesitan varios tipos de formatos para su perfecta visualización en los diferentes navegadores. En @font-face vamos a utilizar también la misma fuente con diferentes formatos para que todos los navegadores puedan utilizarla correctamente.

Veamos cuales son los tipos de fuente soportados por los diferentes y principales navegadores:

navegadores-css3

Puede parecer complicado esto, pero realmente es muy fácil ya que hay herramientas que podemos utilizar que nos simplificaran este trabajo.

Existen páginas como estas: www.fontsquirrel.com/fontface/generator que nos va a permitir convertir nuestra fuente a los diferentes formatos para utilizar en nuestra web. Solamente subimos la imagen, marcamos el campo que nos pregunta que si tenemos los derechos de esta fuente, subimos la imagen, le damos a convertir y descargamos el kit con los tipos de fuente con las diferentes extensiones (ttf, otf, woff, svg y eot), pero también esta página nos provee una gran cantidad de fuentes gratuitas para poder utilizarlas en nuestros proyectos.

Una vez ya teniendo la regla declarada y la fuente con sus diferentes extensiones listas, solo tenemos que aplicarla a los elementos de HTML

para una mayor y completa información acerca @font-face ve a esta fuente: http://www.w3.org/TR/css3-fonts/#font-face-rule

( para tener en cuenta )

Debido al uso de cualquier fuentes que podemos utilizar en nuestra web por medio de esta regla @font-face, debemos de tener en cuenta que fuente vamos a utilizar, ya que hay fuentes que cuentan con licencias o derechos de propiedad y si tenemos en cuenta que al utilizar esta regla las fuentes se van a descargar a la cache del navegador y por ende al computador del usuario podrán acceder a ella y reutilizar sin ningún tipo de problema y licencia, esto parece no importar o suele pasarse por alto, pero debemos de tener cuidado ya que hay fuentes que cuestan muchísimo dinero y funcionan bajo licencia.

Por eso debemos de utilizar fuentes de libre acceso, en esta página www.fontsquirrel.com podemos descargar cientos de fuentes libres para poder trabajar tranquilamente en nuestros proyectos web. O http://www.google.com/webfonts para usar Online.

 

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo