Hoy tocaremos el tema de cómo utilizar una tipografía que no es estándar, como por ejemplo Arial, Helvetica, Times New Roman entre otras, en nuestro sitio WEB.
Para aquellos que están comenzando en el mundo de la HTML o inclusive, para aquellos que ya están familiarizado con la WEB, nos podemos encontrar a veces con diseños de sitios que están utilizando un tipo de Font que no es estándar, esto se consigue haciendo que la página WEB cargue estos fonts, el cual le da un toque personalizado y diferente al sitio.
Con la entrada de HTML5 se han abierto muchas puertas para poder utilizar un Font que no es estándar dentro de nuestra página, esto lo podemos lograr de utilizando la regla CSS3 @font-face, la librería Cufón de Javascript o servicios de Fonts en línea como lo es Google WEB Fonts.
CSS3 @font-face
La regla @font-face nos permite carga una fuente determinada dentro de nuestra página, esta regla utiliza unos descriptores en el cual se definen la ubicación de nuestra tipografía, junto a sus características y estilos para luego ser aplicada al texto deseado
Ejemplo de la regla font-face para el font Arial:
<!doctype html>
<html>
<head>
<title>CSS Test</title>
<style type="text/css">
@font-face {
font-family: 'ArialMT';
src: url('arial.eot');
src: url('arial.eot?#iefix') format('embedded-opentype'),
url('arial.woff') format('woff'),
url('arial.ttf') format('truetype'),
url('arial.svg#arial') format('svg');
font-weight: normal;
font-style: normal;
}
.regular_text{ font-family: 'ArialMT'; }
</style>
</head>
<body>
<span class="regular_text">Texto de ejemplo </span>
</body>
</html>Estos son algunos sitios los cuales te permiten generar el código necesario para implementar en tu página.
FontSquirrel
http://www.fontsquirrel.com/fontface/generator
CodeAndMore
http://fontface.codeandmore.com/
Cufón
Cufón es la alternativa en Javascript para implementar custom fonts en nuestros sitios, esta solución consiste en dos partes: Un generador de Font en código javascript y la implementación del código generado utilizando la etiqueta canvas de HTML5
Es necesario cargar la librería cufon-yui.js para la implementación de la fuente generada
<!doctype html>
<html>
<head>
<title>Cufon Test</title>
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="arial.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1'); // Works without a selector engine
Cufon.replace('#sub1'); // Requires a selector engine for IE 6-7, see above
</script>
</head>
<body>
<h1>Your custom font here</h1>
<h2 id="sub1">Your custom font here too</h2>
<!-- To avoid delays, initialize Cufón before other scripts at the bottom -->
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>Puedes encontrar mayor información en los siguientes enlaces
Documentación
https://github.com/sorccu/cufon/wiki/
Sitio WEB
http://cufon.shoqolate.com/generate/
Servicios en Linea
Google ofrece una de las más grandes librerías a la hora de implementar custom fonts en la WEB, la URL del sitio es http://www.google.com/webfonts
Una de las cosas que cabe destacar es que todos los fonts son de uso Libre y Gratis, algunos fonts son propietarios y no pueden ser utilizados por los puntos anteriores mencionados al menos que se pague por la licencia.
Otros sitios ofrecen el mismo servicio, pero bajo un costo, algunos de ellos son:
WebType: http://www.webtype.com/
Fontdeck: http://www.fontdeck.com/
Fonts Live: http://www.fontslive.com/
Espero este post haya sido de su agrado, no olvides en dejar tu comentario y/o sugerencias.
Gracias y los espero de visita para nuestro próximo post.
