¿Cómo utilizar Google Web Fonts en tu sitio?

Si quieres usar en tu sitio un tipo de letra distinto a los habituales una buena alternativa es "Google WebFonts", aquí voy a explicar la manera más simple de hacer esto.

Utilizando Google Web Fonts

Primero vamos al directorio de fuentes que tiene disponible Google para elegir la que queremos usar.

googleWebfontDirectory.jpg

Una vez elegida la fuente que queremos utilizar, necesitamos agregar a nuestro sitio en Bligoo una hoja de estilo que incluya esta fuente. Para esto vamos a editor de sitio (tusitio.bligoo.com/editor) y hacemos clic en la pestaña "CSS/HTML". Dentro de la pestaña "CSS/HTML" tenemos todos los archivos que se utilizan para dar forma al tema de nuestro sitio en Bligoo, a la izquierda aparecen varias cajas que agrupan los archivos del tema según su tipo, hojas de estilo, plantillas, los archivos .tpl.

Para agregar una nueva hoja de estilo al sitio tenemos que editar la plantilla index.tpl. Buscamos en la caja "Plantillas" y luego hacemos click sobre el archivo. A la derecha aparece el contenido del archivo en una caja donde podemos modificarlo. A este archivo tienes que agregar al comienzo la siguiente línea:

<link href="http://fonts.googleapis.com/css?family=<var>Font+Name</var>" type="text/css" rel="stylesheet" />

reemplazando "Font+Name" por el nombre de la fuente que queremos usar, por ejemplo "Cuprum", si el nombre de la fuente que queremos usar tiene espacios en blanco debemos reemplazarlos por el signo +. El comienzo archivo "index.tpl" debería quedarte así:

     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
     <title>{page-title}</title>
     <link href="http://fonts.googleapis.com/css?family=Cuprum" type="text/css" rel="stylesheet" />

...

Con esto ya tienes incluída en tu sitio la hoja de estilo de la Fuente que quieres usar, ahora sólo necesitas asignarle esta fuente a un elemento de tu sitio. Si lo que quieres es que todo el sitio utilice esta fuente tienes que editar la hoja de estilo de tu sitio.

La primera de las cajas para seleccionar los archivos del tema es la de hojas de estilo, tiene como título "Hojas de estilo", normalmente dentro de esa caja hay dos archivos, generated.css y base.css. Típicamente en Bligoo todo el CSS de tu sitio se encuentra en la hoja generated.css, y base.css se encnuentra en blanco.

Puedes modificar el archivo generated.css con la precaución de que estás modificando la hoja de estilo de tu sitio, o si prefieres puedes agregar las líneas en base.css y así, si te arrepientes de algo, simplemente puedes volver a borrar todo lo que tiene esa hoja y tu sitio volvería a tener su estilo anterior. 

Hacemos click en base.css y agregamos la siguiente línea: 

body {
font-family: 'Cuprum', serif;
font-size: 48px;
}

Con esto estamos diciendo que todo el texto de nuestro sitio utilice la fuente 'Cuprum'.

Luego de esto guardamos y listo! ahora nuestro sitio estará utilizando la fuente "Cuprum".

|

Comentarios

Comentarios de este artículo en RSS

Comentarios recientes

  • No hay comentarios recientes
Cerrar