Google Fonts - Fuentes Tipografías Para tu Sitio Web

Elegir la fuente tipografía correcta para un sitio web es algo que hay que tener en cuenta desde el inicio del proyecto y así implementar un sitio web con una tipografía de apariencia profesional y personalizada.

Para realizar esta tarea Google Fonts nos ofrece una amplia gama de fuentes tipografías, las cuales puedes implementar fácilmente en tu sitio web.

Las fuentes tipografías que aquí se ofrecen son de uso libre.

Seleccionar Fuentes Tipografías de Google Fonts

Para seleccionar tipografías de Google Fonts vamos a realizar lo siguiente:

Accede a la página de Google Fonts.

Seleccionar Fuente

Selecciona todas las fuentes tipografías que vas a usar en tu sitio web, presionado el simbolo +.

Caja de Fuentes Seleccionadas

Una vez seleccionado todas las tipografías, vamos a abrir la caja que contiene todas las fuentes tipográficas seleccionadas.

Caja Empotrar

La sección EMBED contiene lo siguiente:

  • STANDARD: contiene el link apuntando al archivo CSS de las fuentes tipográficas seleccionadas, Google Fonts recomienda agregarlo dentro de la etiqueta HTML <head>.
  • @IMPORT: contiene el código CSS @import url(''), para agregarlo en la etiqueta <style> o en un archivo .css externo.
  • Specify in CSS: contiene el código CSS para indicar el tipo de familia fuente a utilizar.

Caja Perzonalizar

La sección CUSTOMIZE contiene lo siguiente:

  • Al inicio se muestra una lista de todas las fuentes tipográficas seleccionadas en mi caso (Lato, Roboto) y me permite seleccionar los diferentes pesos (light 300, regular 400, bold 700, ...) que soporta la fuente.
  • Languages: nos permite seleccionar el lenguaje en mi caso esta seleccionado por defecto Latin.

Descargar Fuentes Tipografías (Google Fonts)

Si por algún motivo deseas descargar las fuentes tipografías de Google Fonts.

Botón Descarga

Haz clic en el botón .

Descargar Fuentes

Para iniciar la descarga haz clic en el botón ⇩ Download.

Uso de las Fuentes Tipografías (Google Fonts)

Voy a incluir un pequeño código de HTML y CSS, para mostrar el uso en una plantilla por ejemplo.

<!DOCTYPE html>  
<html lang="es-PE">  
<head>  
    <meta charset="UTF-8">
    <title>Google Fonts</title>
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400|Roboto:300,400" rel="stylesheet">
    <style>
    body{
        font-size: 20px;
        margin: 0;
    }
    /*Aplicamos la familia fuente Roboto para los tag h*/
    h1,h2,h3,h4,h5,h6{
        font-family: 'Roboto', sans-serif;
    }
    /* Aplicamos la familia fuente Lato para los tag p*/
    p{
        font-family: 'Lato', sans-serif;
        font-size: 1em;
    }
    </style>
</head>  
<body>  
    <h2>Agregando las Tipografías de Google Fonts a Nuestro Proyecto</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, accusamus!</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, quod alias itaque quibusdam reprehenderit molestias.</p>

    <h2>Titulo h2</h2>
    <h3>Titulo h3</h3>
    <h4>Titulo h4</h4>
    <h5>Titulo h5</h5>
    <h6>Titulo h6</h6>
</body>  
</html>  

En el ejemplo anterior aplicamos la familia fuente Roboto para los tag HTML h y la familia fuente Lato para los tag HTML p.

Resultado

See the Pen Agregar Tipografías de Google Fonts by Luis Rene Mas Mas (@01luisrene) on CodePen.

Bueno mis amigos con estas simples explicaciones creo que no se podrán enredar a la hora de agregar las tipografías de Google Fonts a su proyecto. Bye!

Luis Rene Mas Mas's Picture

Luis Rene Mas Mas

Hola, soy desarrollador front-end & dasarrollador móvil (Android), me encanta las tecnologías web - móvil, también administro este blog.

Trujillo - Perú @01luisrene

Únete al Blog

Obtén los últimos artículos publicados directamente en tu bandeja de entrada.

O suscríbase vía RSS con Feedly!

Comparte tu Opinión