Como Incluir Fuentes de Google Fonts en tu Web

Como Incluir Fuentes de Google Fonts en tu Web

Google Fonts es un sitio de Google en el cual se almacenan actualmente mas de 600 tipos de fuente, las cuales se encuentran disponibles para todos los que quieran hacer uso de ellas y de forma completamente gratuita. Esta plataforma ayuda a que el insertar tipos de letras variados sea muy sencillo y rapido permitiendote hacer uso de toda tu creatividad. Recordar que ya no es como hace años en donde todos teniamos que utilizar las mismas fuentes por preocupacion de que el usuario no tuviera instalada la de nuestra eleccion pero esto ha cambiado y no tienes de que preocuparte, Google almacena las fuentes y las ofrece de forma gratuita, veamos como incluir fuentes de Google Fonts en tu Web o proyecto…

Requerimientos

Escenario

Tienes un proyecto o sitio web y quieres darle un toque personal a tu trabajo, quieres resaltar entre los demas asi que piensas en elegir una fuente de letra «diferente».

[note]Recordar que el 80% de al estetica de tu proyecto esta en la fuente que utilizas.[/note]

Como Hacerlo

Simplemente ve a Google Fonts y elige la que mas te guste, recuerda que hay mas de 600 opciones.

Una vez que hayas elegido la que se adapte a tus requerimientos de estetica ve al boton de uso rapido (quick use) abajo y a la derecha

Como Incluir Fuentes de Google Fonts en tu Web 1


¿Sabías que?

¿Necesitas hosting wordpress? WebEmpresa te ofrece un servicio super rápido, excelente soporte en español y certificado SSL gratuito:

WebEmpresa

Despues en el paso 1 y 2 configuramos algunas opciones de la letra que elgimos, despues en el paso 3 elegimos la forma de importar esta letra en nuestro proyecto, nosotros elegiremos la que esta por default (Standard)

Como Incluir Fuentes de Google Fonts en tu Web 2

y la incluimos en nuestro sitio web entre las etiquetas head


 

Ahora ya estara cargada en nuestro proyecto, simplemente tenemos que utilizarla, por ejemplo yo tengo un encabezado h1 en mi proyecto y aqui es donde quiero utilizar mi fuente.


Generador de Sombras con Css

en la hoja de estilos o codigo css especificare que quiero utilizar esta fuente..


h1{
text-align:center;
color:#00CC00;
font-family: 'Walter Turncoat', cursive;
}
[note]La linea

font-family: 'Walter Turncoat', cursive;

la obtuvimos en el paso 4 en Google Fonts.
Como Incluir Fuentes de Google Fonts en tu Web 3
[/note]

Resultado

Como Incluir Fuentes de Google Fonts en tu Web 4

Visto – Como Incluir Fuentes de Google Fonts en tu Web

Clic para valorar esta información
[Total: 0 Promedio: 0]