Estilos de letra en HTML. Parte 2

Hoy les traigo otro tutorial acerca de estilos en HTML, pero en esta ocasión no cargaremos fuentes que tenemos instaladas en nuestro equipo, serán fuentes de Google que utilizaremos directamente desde internet.

Pero antes de iniciar, les comparto el tutorial de estilos de letra en html. parte 1 y el tutorial anterior acerca de color e imagen de fondo en html.

Ahora si comencemos con este tutorial.

Para poder cargar en  nuestra pagina web una fuente de Google, buscaremos la fuente que sea de nuestro agrado en esta pagina: https://www.google.com/fonts, una ves que tengamos la fuente que sea de nuestro interés veamos cual es su nombre, en mi caso me gusto esta fuente:

Y el nombre de la fuente siempre esta en la parte inferior izquierda en negritas, en este caso “Codystar”, una ves que sabemos el nombre de la fuente que nos interesa, ya es momento de implementarla en nuestra pagina web.

Lo que haremos a continuación es cargar la fuente de nuestro interés a un estilo que generaremos. El nuevo estilo lo generaremos dentro de las etiquetas y solo haremos referencia a el dentro de las etiquetas .







texto1 
{
font-family: "Codystar";
font-size: 48px;
}


Estilo de letra





Texto de Ejemplo

En la etiqueta estamos haciendo referencia a la fuente que se encuentra en internet, solo tienen que sustituir “Codystar”, por el nombre de la fuente de su elección. Una vez hecho esto dentro de la etiqueta , estamos declarando una función llamada “texto1” (sustituye este nombre por un nombre a tu gusto), cada que utilicemos las etiquetas con el nombre de nuestra función, en este caso:

      Texto que queremos que tenga nuestra fuente

A nuestro texto se le aplicara lo que definimos dentro de nuestra función, en este caso, dentro de nuestra función se esta indicando que la fuente que utilizaremos sera la fuente que cargamos anteriormente, en este caso la fuente “Codystar”, que tendrán que sustituir por la fuente de su elección, y se esta indicando que el tamaño del texto sera de 48 pixeles (este valor puede cambiar o simplemente omitirse dicha linea).

Y por ultimo dentro de las etiquetas se esta indicando que nuestro texto tendrá nuestra fuente y que sera de color rojo, las etiquetas con el parámetro color, la explique en este tutorial, Color de texto en html.

Y el resultado que obtendríamos con el ejemplo anterior, seria el siguiente:

A continuación les comparto un ejemplo en el que utilizo varias fuentes distintas en una misma pagina web, lo único que necesitamos hacer, es delimitar cada texto con las etiquetas correspondientes a esa fuente.








texto1 
{
font-family: "Codystar";
font-size: 48px;
}
texto2 
{
font-family: "Monoton";
font-size: 48px;
}
texto3
{
font-family: "Press Start 2P";
font-size: 48px;
}


Estilo de letra





Texto de Ejemplo
Texto de Ejemplo
Texto de Ejemplo

Y este seria el resultado que  obtendríamos con dicho código:

Espero y este tutorial les sea de utilidad, cualquier duda no duden en comentarla por favor. Muchas gracias por visitar este tutorial.

Fuente:
https://developers.google.com/fonts/docs/getting_started consultada el 12 de Julio del 2015.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s