Hola,
Vamos a hablar un poco sobre un tema que es de gran utilidad para aquellos que no estén satisfechos con el tipo de fuente que tienen en sus desarrollos web.
@font-face es una implementación de css (Cascading Style Sheets) que nos ofrece la posibilidad de implementar dentro de nuestro sitio web, tipos de letras que no estén instaladas en el computador del usuario que visita la página, antes que esto fuera así teníamos que usar fuentes estándar y entre estas buscar alguna que se ajustara a nuestro diseño, etc. Con esta implementación podemos usar la fuente que más nos guste.
¿Cómo usarlo?
Realmente es muy sencillo de implementar, ahora bien nos da la posibilidad de adicionar mas opciones para ampliar las características. Inicialmente se declara «font-family», «src» es donde se encuentran el archivo de la fuente *.ttf, *.otf, etc. Igualmente puede incluir un «font-weight» para mencionar el tamaño de la fuente (no es necesario para el tamaño normal, pero es necesario por todo lo demás, negrita , delgada, etc).
[sourcecode language=»css»]
@font-face {
font-family: «Square721BTRoman»;
src: url(«fonts/square721_bt_roman-webfont.ttf»);
font-weight:400;
}
[/sourcecode]
Después de esto ya puede usarla como si llamara cualquier fuente de las estándar.
[sourcecode language=»css»]
p {
font-family: «Square721BTRoman»;
}
[/sourcecode]
Esta es la implementación más sencilla, pero el universo de posibilidades es mucho más grande.
Fuentes y Compatibilidad.
Existen varios tipos de formatos de fuente como son otf (Open Type Font) o ttf (True Type Font) @font-face puede cargar varios formatos de estas fuentes, lo único que debemos hacer es indicar en la directiva src donde se encuentra el archivo de la fuente. Ahora respecto a la compatibilidad esto depende del navegador y la versión del mismo que estemos usando, por lo cual siempre conviene en el @font-face incluir todos los tipos de formatos conocidos, ya que por ejemplo internet explorer usa eot, y algunos dispositivos móviles como el safari usan svg.
Tamaño del Archivo.
Es importante tener en cuenta que el tamaño del archivo de la fuente varia dependiente del formato de la misma, al igual que el tipo de fuente, algunas fuentes con trazos más sutiles pueden tener un archivo de mayor tamaño que otras cercanas al estándar. Esto afecta la navegabilidad del sitio puesto que la fuente es descargada al momento de visitar la página.
Derechos de Autor.
A la fecha en que publicamos este post, es un asunto aún muy ambiguo, de cualquier forma tenga en mente simpre usar una fuente que este licenciada para poder usarla sin ningún problema.
Espero que esta información les sea útil, no duden en escribirnos para cualquier duda o comentario al respecto.
Siguenos en: