Utilizando fuentes de Google en CSS

Descubre cómo potenciar el diseño de tus páginas web utilizando las fuentes de Google en CSS. Aprenderás a dar un toque único y atractivo a tus proyectos con esta sencilla y efectiva herramienta. ¡Sigue leyendo para convertirte en un experto en el uso de fuentes web!

Cómo utilizar una fuente de Google en CSS

Utilizar una fuente de Google en CSS es un proceso sencillo que implica seguir algunos pasos específicos. A continuación, se detallan los pasos necesarios para lograrlo:

Seleccionar una fuente de Google: Ingresar al sitio web de Google Fonts (fonts.google.com) para elegir la fuente que se desea utilizar. Una vez seleccionada la fuente, se procede a incluirla en el proyecto.
Obtener el enlace de la fuente: En la página de la fuente seleccionada, se debe hacer clic en el botón «Seleccionar este estilo» y luego en el icono del carrito. Se mostrará un cuadro flotante en el que se encuentra el enlace de la fuente. Copiar dicho enlace.
Insertar el enlace en el archivo HTML: Dentro de la etiqueta <head> del archivo HTML del proyecto, se debe incluir el enlace copiado en el paso anterior. El enlace tendrá la siguiente estructura:
```
<link href="https://fonts.googleapis.com/css2?family=NOMBRE_DE_LA_FUENTE&display=swap" rel="stylesheet">
```
Aplicar la fuente en la hoja de estilos CSS: En el archivo CSS del proyecto, se puede especificar la fuente de Google que se ha incluido mediante el uso de la propiedad font-family. Por ejemplo:
```
body {
    font-family: 'NOMBRE_DE_LA_FUENTE', sans-serif;
}
```

Además, es importante tener en cuenta que al utilizar fuentes de Google, se debe respetar la licencia de uso de cada fuente seleccionada. Es recomendable siempre revisar los términos de uso de las fuentes para cumplir con los requisitos legales.

¡Con estos pasos y precauciones, podrás incorporar fácilmente una fuente de Google a tus proyectos web a través de CSS!

Cómo utilizar las fuentes de Google Fonts

Para utilizar las fuentes de Google Fonts en tu sitio web, sigue estos pasos:

Seleccionar la fuente: Visita la página de Google Fonts y elige la fuente que deseas utilizar en tu proyecto. Puedes filtrar por categoría, grosor, estilo, etc.
Obtener el código: Una vez seleccionada la fuente, haz clic en «Seleccionar este estilo» para agregarlo a tu selección. Luego, haz clic en el icono del botón de la parte inferior que dice «Familias seleccionadas», donde encontrarás el código necesario para incrustar la fuente en tu sitio web.
Implementar en tu web: A continuación, copia el código proporcionado por Google Fonts y pégalo en la sección donde deseas aplicar la fuente en tu página HTML o CSS. Por ejemplo:

Una vez agregado este enlace en la sección de <head> de tu documento HTML, podrás utilizar la fuente en tu CSS especificando la fuente deseada en la propiedad font-family. Por ejemplo:

    body {
      font-family: 'Nombre de la Fuente', sans-serif;
    }

Recuerda que al utilizar Google Fonts, estás cargando las fuentes desde los servidores de Google, lo que puede afectar ligeramente el rendimiento de tu sitio web al depender de la conexión a Internet del usuario.

Ver más Diseñando un sitio web desde cero: Paso a paso

Fuentes disponibles en CSS

Las fuentes disponibles en CSS son fundamentales para definir la apariencia del texto en una página web. Con CSS, se pueden especificar distintas opciones de fuentes para garantizar la coherencia y legibilidad del contenido. A continuación, se detallan las formas de especificar fuentes en CSS:

Fuentes Genéricas: CSS proporciona una serie de palabras clave para definir familias de fuentes genéricas que se aplicarán en caso de que la fuente deseada no esté disponible. Algunos ejemplos de fuentes genéricas son: serif, sans-serif, monospace, cursive y fantasy.
Fuentes Web: Son fuentes que se pueden cargar desde servidores externos para ser utilizadas en un sitio web. Para incluir una fuente web en un documento CSS, se utiliza la regla @font-face. Por ejemplo:
```
        @font-face {
            font-family: 'NombreFuente';
            src: url('ruta_fuente.ttf') format('truetype');
        }
        
```
Fuentes Embebidas: Este método permite incrustar la fuente directamente en el archivo CSS. Se pueden utilizar formatos de fuente como WOFF o WOFF2 para asegurar la compatibilidad con la mayoría de los navegadores web modernos. Por ejemplo:
```
        @font-face {
            font-family: 'NombreFuente';
            src: url('ruta_fuente.woff') format('woff');
        }
        
```
Fuentes Locales: Se pueden especificar nombres de fuentes instaladas localmente en el dispositivo del usuario como parte de la familia de fuentes. En caso de que la fuente no esté disponible, se aplicará la fuente alternativa. Por ejemplo:
```
        font-family: 'MiFuenteLocal', sans-serif;
        
```

Para finalizar, recuerda que utilizar fuentes de Google en CSS es una excelente forma de dar personalidad a tus diseños web. Aprovecha la variedad de tipografías disponibles para destacar y transmitir tu mensaje de manera eficaz. ¡Hasta pronto!