menú
¿Música de YouTube sin molestos comerciales? ¡Ahora es posible!
TubeFiesta es una aplicación que te permite reproducir música de YouTube como un reproductor tradicional.
Crear listas, reproducción aleatoria, repetir, y hasta exportar el video a otra pantalla.
Conocer más Ir a tfiesta.com

Mejora la primera impresión con una WebFont

Publicado el 30/09/2014 | 781 visitas

Muchos de quienes nos dedicamos a la programación tenemos la responsabilidad de diseñar (o intentar hacerlo), como sea, no está de más tener algunos trucos que ayuden a que nuestros trabajos posean un toque de profesionalismo.
Uno de ellos definitivamente es utilizar una fuente diferente a la que el navegador nos pone por defecto, así que en este pequeño tutorial enseñaré cómo insertar una Fuente de Google a una pagina Web.

tutorial webfonts eledwin.com

Cómo funciona

Empecemos diciendo que Google nos facilita el trabajo, nos da una url tipo CDN para que no tengamos que alojar las fuentes en nuestro servidor. Esta URL se adiciona en nuestro código HTML como un archivo de estilos (etiqueta link) y posteriormente podemos referenciar esa fuente desde cualquier parte de nuestro código CSS con la propiedad font-family.

Para probarlo vamos a elegir una o varias fuentes que queremos utilizar en la página de fuentes de google

Aquí tenemos una lista bastante extensa de fuentes para elegir y tenemos la posibilidad de escribir un texto personalizado para tener una idea más completa de cómo se verá cuando la utilicemos.

personalizar fuente google

Cuando elijas una fuente que te guste haces clic en el botón "Quick-use" que se marca en la siguiente imagen:

boton quick-use google webfonts

En la ventana que aparece puedes definir el estilo de la fuente, la densidad, entre otros parámetros. En la parte derecha podrás ver una especie de medidor, donde se indica el impacto en la carga de la página.

Ya que es un recurso externo, al cargarse la página este recurso deberá descargarse desde los servidores de Google, aumentando así los tiempos de carga de la página. Si para ti es importante esto debes tener mucho cuidado y no utilizar demasiada variedad de fuentes, con una o 2 bastará?.

Luego copiaremos la etiqueta link que nos da Google y la pegaremos en nuestro HTML (puede ser en el head antes de nuestro archivo de estilos)

url webfont google

Finalmente solo nos queda utilizar nuestra fuente, tomando como base el nombre de la fuente que se encuentra en el nombre de la variable family de la url que copiamos.

En mi caso la url contiene family=Titillium+Web así que para nuestro CSS debemos poner font-family: 'Titillium Web'

Notemos que se quitó el signo mas (+) ya que el nombre de la fuente es conformada por dos palabras.

Y listo. Ahora visualiza tu página en el navegador y cuéntanos cómo se ve.

Si eres programador y te interesa conocer más de temas de diseño puedes darte una pasada por el tutorial de maquetación en html y css donde he escrito algunos tips para aprender a dominar html y css "a nuestro antojo".

Talvez te interese...

[Truco] Contar caracteres en Google Chrome
Flashes de cámara con JQuery
Lluvia de colores con JQuery
Multiples columnas HTML y CSS sin tablas
blog comments powered by Disqus