Páginas

22 enero 2011

WebFonts: Usar cualquier tipografia en nuestra web

Google Font Directory

Muchas veces los diseñadores o webmasters, al realizar un diseño o modificación a nuestra página web casi siempre nos topamos con elegir el tipo de fuente para determinadas áreas de nuestro diseño sin que nuestros visitantes se sientan incómodos leyendo nuestros posts o noticias.

Pero después de elegir la que mejor se adapta a nuestro diseño, sin sobrecargar la vista. Nos llevamos la sorpresa de que ese tipo de fuente no existe en algún sistema operativo y nuestro web se ve horrible y sobrecargado.

Pero gracias, de nuevo, a nuestros amigos de Google Font Directory podremos escoger de entre 35 fuentes, que podemos aplicar en nuestro blog sin preocuparnos del sistema operativo de nuestros visitantes. Y lo mejor es que lo hace sin imágenes( que hacen que cargue demasiado despacio ).

Como es posible?, continua leyendo xD!!


Pero gracias al bendito CSS, podemos escoger la fuente que queramos y hacer que se vea de la misma manera en cualquier sistema operativo sin importar que tenga instalada la fuente. Y lo mejor es que lo hace sin imágenes( que hacen que cargue demasiado despacio ).

Las instrucciones CSS que nos permiten realizar lo anterior son las siguientes:
@font-face {
font-family: 'NOMBRE_DE_TIPOGRAFIA';
src: local('NOMBRE_DE_TIPOGRAFIA'), url('URL_DE_LA_TIPOGRAFIA') format('truetype');
}

Así es como lo haríamos:
  1. Alojamos la fuente que prefiramos en el servidor de nuestra preferencia.
  2. Escribimos la URL que nos proporcionen en el código de arriba.
  3. Agregamos el código de arriba antes de la etiqueta </head>
  4. Aplicamos la tipografia a nuestra página web.
Pero gracias, de nuevo, a nuestros amigos de Google Font Directory podremos escoger de entre 35 fuentes, que podemos aplicar en nuestro blog sin preocuparnos del sistema operativo de nuestros visitantes. Como lo puedes observar en este post.

Lo que tenemos que hacer es lo siguiente:

[1] Seleccionamos la tipografia que mas nos guste:

Seleccionar la que mejor nos parezca


[2] Seguidamente damos click en "Use this font":

Despues seleccionar la opcion -Use this font-

[3] Copiamos el primer código que nos proporcionan:

Copiamos los códigos

[4] Entramos a nuestro panel de Diseño>Edicion HTML>Sin expandir las plantillas de artilugios

[5] Buscamos con
'Ctrl + F'
: </head>

Y antes de esa etiqueta colocamos el código que nos dieron en Google Font Directory

[6] Despues podremos aplicar la fuente donde queramos de la siguiente manera:

/!\Si no sabes como aplicar una fuente a tu blog sigue leyendo, ;P



SELECTOR {
font-family: 'NOMBRE_DE_TIPOGRAFIA';
[.........]
}
Los selectores mas importantes de los blog en Blogger son:

.post-body
#header-wrapper
.post-footer
#sidebar-wrapper
#comments-block
Cuyas áreas son respectivamente:
  • Cuerpo de la entrada
  • Cabecera del Blog
  • Pie de la entrada
  • Barra lateral del Blog
  • Area de comentarios de la entrada
ENLACE | WebFonts

4 comentarios:

  1. Está la fuente de Ubuntu... ¡No sé a qué estoy esperando a implementarla en el blog! :D

    Mejor me lo dejo para la próxima plantilla, que tengo otros objetivos ahora mismo, y no quiero enredar ahora con códigos, me lo anoto en mi página de chuletas de diseño ;)

    Cada vez hay más fuentes disponibles, gracias por recordarme que existe este servicio. Un saludo.

    ResponderBorrar
  2. SäNTÿ saludos:
    Veo que tienes distintos tipos de tipografía en tus notas lo que nos permite apreciar el efecto que produce meter algunos cambios como estos. Buena idea!

    ResponderBorrar
  3. José GDF, la fuente de Ubuntu fue lo primero que me llamó la atención, ahora que me cambié a Linux ;). Un saludo :P!

    Jubilada en Acción!, si jeje, me he dado a la tarea de exponer ejemplos funcionales en todos o almenos en la mayoría de mis notas :P. Se vuelve un poco complicado pero vale la pena el resultado xD. Saludos :P!

    ResponderBorrar
  4. Un resultado un poco loco pero divertido!
    Buen día.

    ResponderBorrar

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.