Fuentes propias en tu página web

publicado en: Internet, Recursos gratis | 3

Con la evolución de los navegadores de internet, los desarrolladores web podemos usar más y mejores recursos para hacer brillar nuestras páginas. Con la introducción de las hojas de estilo en su tercera versión, la llamada CSS3, son muchas las nuevas opciones disponibles. Una de ellas es la posibilidad de publicar la web con cualquier tipo de fuente y que se vea tal cual en toda clase de navegador.

Hasta ahora estábamos condicionados a los tipos de letra que venían instalados por defecto en los exploradores de internet y sistemas operativos. Esto obligaba al diseñador web a no jugársela. Se podía construir una web usando un tipo de letra personalizado y verlo bien en el propio ordenador. Pero como los demás usuarios no lo tenían instalado al final la web acababa perdiendo encanto porque el navegador, sin avisar, lo sustituía por otro estándar.

Con CSS3 esto ha cambiado y ahora con la regla font-face esto ya se puede hacer. Simplemente hay que añadir la fuente deseada como un archivo a la web y llamarlo con una simple instrucción.

<style>
@font-face {
font-family: nombre_Fuente;
src: url(mi_fuente.woff);
}
<style>

Los formatos permitidos son varios TTF, OTF,WOFF, EOT y SVG. Pero nos queda saber cómo pasar un archivo de fuente normal TTF, OTF a WOFF, EOT y SVG si se necesita. Existe una aplicación gratuita para Mac que lo hace de forma simple. Arrastra y suelta el archivo.

Este es el enlace para su descarga: http://fontprep.com/

Recomendar este artículo:
  • Twitter
  • LinkedIn
  • Print
  • Facebook
  • Google Bookmarks
  • del.icio.us

3 Respuestas

  1. Leñador

    Gracias, Álex. Espero que nos sirva.

  2. Róber

    Muy buen artículo, Alex. Me será útil para tener presente la instrucción, si algún día me animo a usar estas fuentes extrañas. :)

    Me gustaría aprovechar para añadir dos indicaciones que conviene recordar:

    1.- Hay que tener los permisos para usar cualquier tipo de letra (para cualquier cosa, incluidos sitios web). Hay tipos de letra que son gratuitos (y no hay necesidad de contactar con su autor para usarlos) si se usan para aplicaciones personales o comerciales. Otros solo se pueden usar gratuitamente en aplicaciones personales o sin ánimo de lucro, pero para las comerciales hay que pagar o pedir permiso al autor. Finalmente, hay tipos de letra que solo se pueden usar pagando o con permiso expreso de su autor. Vigilad la licencia con la que se distribuye el tipo de letra.

    2.- El archivo que guarda un tipo de letra puede ser grande (sobre todo si incluye varias versiones de la fuente: normal, cursiva, negrita, etc.), y a nadie le gusta tener que esperar treinta segundos mientras se descarga un archivo de 1 MB necesario para poder leer el texto de una página web. Pero, si no queda más remedio, todos nos aguantamos… Una vez. Lo que no agrada nada es tener que descargar ese archivo cada vez que vamos a esa página web, y menos varias veces al día. Por eso conviene que, siempre que se usen tipos de letra personalizados, también se utilice la caché de HTML5. Con ella el diseñador de la página web informa al navegador de que este archivo de fuente no se va a modificar en mucho tiempo y conviene que lo guarde para el futuro, para acelerar las descargas de esas páginas.

    Un triste ejemplo negativo de este último caso que he visto hace poco es la sección de Cupones de la página web del DIA (la cadena de supermercados). Utilizan un tipo de letra especial para los cupones y, si no lo tienes instalado en tu ordenador, ese tipo de letra se descarga cada vez que vas a su página (porque no le piden al navegador que lo almacene). Eso hace que la página de cupones tarde unos 30 segundos en cargarse (con el tipo de letra en caché o instalado en tu ordenador tarda solo 5).

    Y eso es todo. Espero que sea útil.

    Un saludo y felicidades otra vez por el artículo.

  3. Alex

    Muy buen comentario con una excelente explicación. Muchas gracias Róber.

Comentarios Cerrados.