Como usar una fuente de Google Fonts en tu pagina web. Como cambiar el tipo de letra de tu página web con CSS. Usando font-family

Google nos ha brindado muchas cosas útiles y prácticas en este nuevo universo del internet, el mejor motor de búsqueda, un sistema operativo muy bueno para los teléfonos, Google Maps, la lista es larga. Ahora, uno de esos productos que uso mucho últimamente es Google Fonts. Más de 600 tipos de letras disponibles. Totalmente gratis, para que puedas usar y adornar o arreglar tu página web. Bueno, acá les explico como usarl Google Fonts.

Usando Google Fonts. La Explicación Rápida

En el encabezado del documento HTML vas a añadir la siguiente línea:

<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Rokkitt”>

Luego, en tu hoja de estilos vas a especificar la fuente (tipo de letra) que deseas usar, así:

<style> body { font-family: ‘Rokkitt’; } </style>

Eso es todo! VOILA !

Como usar Google Fonts en tu Página Web

Observemos el siguiente ejemplo, puedes hacer clic en HTML, para ver el código HTML y puede hacer clic en CSS para ver el estilo aplicado al documento. El resultado lo veremos luego donde dice: RESULT.
En la línea 1 del HTML vas a borrar: ‘<!–‘, para ver como se cambia la fuente ve a RESULT.

[editr item=”post-669″ html=”cssGoogleFonts.html” css=”googleFonts.css” scrollbar=”dark” theme=”monokai” wrap=”true”]

Así se vera tu documento completo de HTML.
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Rokkit”>
<style>
body {
font-family: ‘Rokkitt’, serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Usando una fuente tipogr&aacute;fica de Google Fonts</div>
</body>
</html>

En el código de arriba hay que tener en cuenta 3 cosas:

  1. El elemento <link>, este esta creando un enlace con el sitio que nos va a proporcionar la fuente que queremos usar. Este elemento <link> debe de ser usado en el encabezado del documento HTML, mejor dicho, entre las etiquetas: <head> … </head>.
  2. Asegurarnos que esta linea, “family=Tangerine”, esta escogiendo la fuente correcta. Que no haya errores ortográficos o que la hayamos deletreado incorrectamente.
  3. La hoja de estilos debe de asignar esta fuente al elemento donde la deseamos usar. En el ejemplo de arriba hemos asignado esa fuente al elemento body, osea que la vamos a usar en todo el documento.

Sí! así de sencillo, bueno si tienen preguntas o dudas deja un mensaje y con mucho gusto te ayudaremos.

 

Add Comment