Summary  
This chapter explains how to integrate custom web fonts by adding HTML <link> tags to fetch font resources (with preconnect and CORS considerations) and then applying them in CSS using font-family stacks and fallbacks to ensure consistent, performant typography.

General domain of usage  
Front-end web development

Learn how to add custom fonts to your website using Google Fonts. This video demonstrates how to select a font, embed it in your HTML, and apply it using CSS. You'll see the difference between default and custom fonts, and understand why proper font loading order is important for your site's appearance. Use simple css examples. Do not provide full html document stucture. Focus on css mainly

Las fuentes tipográficas influyen significativamente en la apariencia y la sensación de un sitio web. Una tipografía de alta calidad mejora la legibilidad y hace que el diseño sea más memorable. Muchas fuentes son de uso gratuito, mientras que otras requieren licencia; siempre respete las normas de derechos de autor.

## Servicio de Google Fonts
Existen muchas fuentes interesantes disponibles para uso gratuito. Explore las opciones proporcionadas por <a href="https://fonts.google.com/" target="_blank"><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> https://fonts.google.com/</a>. Es sencillo agregar una fuente de Google al marcado.

Primero, ejecute el siguiente ejemplo, que utiliza la fuente predeterminada. El elemento `p` tiene las siguientes propiedades: `font-family` (nombre de la fuente), `font-size` (tamaño de la fuente) y `font-weight` (grosor de la fuente).

PCFkb2N0eXBlIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8cD4KICAgICAgQnVpbGRpbmcgZ3JlYXQgZXhwZXJpZW5jZXMgdGFrZXMgdGltZSwgY2xhcml0eSwgYW5kIGZvY3VzLiBUaGlzIHNwYWNlIGlzCiAgICAgIHJlc2VydmVkIGZvciBmdXR1cmUgY29udGVudCB0aGF0IHdpbGwgZ3VpZGUsIGluZm9ybSwgb3IgaW5zcGlyZS4gV2hldGhlcgogICAgICBpdCdzIGEgc3RvcnksIGEgcHJvZHVjdCBkZXNjcmlwdGlvbiwgb3IgYSBtZXNzYWdlIHRvIHlvdXIgYXVkaWVuY2UgLSBldmVyeQogICAgICB3b3JkIGhlcmUgd2lsbCBtYXR0ZXIuCiAgICA8L3A+CiAgICA8cD4KICAgICAgVW50aWwgdGhlbiwgdGhpbmsgb2YgdGhpcyBhcyBhIHF1aWV0IHBsYWNlaG9sZGVyLiBTb21ldGhpbmcgc2ltcGxlLgogICAgICBTb21ldGhpbmcgd2FpdGluZyB0byBiZWNvbWUgbWVhbmluZ2Z1bC4KICAgIDwvcD4KICA8L2JvZHk+CjwvaHRtbD4=

cCB7CiAgZm9udC1mYW1pbHk6ICdETSBTYW5zJzsKICBmb250LXNpemU6IDI0cHg7CiAgZm9udC13ZWlnaHQ6IDQwMDsKfQ==

La propiedad font-family no funciona porque nuestro proyecto aún no reconoce la fuente personalizada "DM Sans". Agregue la fuente al proyecto utilizando <a href="https://fonts.google.com/" target="_blank"><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> https://fonts.google.com/</a>.

Haga clic en la imagen para ver los detalles con mayor claridad.

En el campo de entrada "Search fonts", escriba el nombre de la fuente que necesita. En este caso, es "DM Sans". Una vez que aparezca, haga clic en la tarjeta de "DM Sans".

En la página de la fuente, haz clic en el botón "Obtener fuente".

A continuación, haz clic en el botón "Obtener código de inserción".

Por último, copia el enlace y pégalo en el archivo HTML de tu proyecto dentro del elemento `<head>`. Es importante insertar el enlace **antes** del enlace a tus estilos personalizados. Esto garantiza que el navegador cargue primero las fuentes personalizadas antes de aplicar cualquier estilo que las utilice. Una vez añadido el enlace, "DM Sans" estará disponible como fuente personalizada para tu proyecto. Ahora, ejecuta el proyecto para verificar que todo funcione correctamente.

PCFkb2N0eXBlIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0icHJlY29ubmVjdCIgaHJlZj0iaHR0cHM6Ly9mb250cy5nb29nbGVhcGlzLmNvbSIgLz4KICAgIDxsaW5rIHJlbD0icHJlY29ubmVjdCIgaHJlZj0iaHR0cHM6Ly9mb250cy5nc3RhdGljLmNvbSIgY3Jvc3NvcmlnaW4gLz4KICAgIDxsaW5rCiAgICAgIGhyZWY9Imh0dHBzOi8vZm9udHMuZ29vZ2xlYXBpcy5jb20vY3NzMj9mYW1pbHk9RE0rU2FuczppdGFsLG9wc3osd2dodEAwLDkuLjQwLDEwMC4uMTAwMDsxLDkuLjQwLDEwMC4uMTAwMCZkaXNwbGF5PXN3YXAiCiAgICAgIHJlbD0ic3R5bGVzaGVldCIKICAgIC8+CiAgICA8bGluayByZWw9InN0eWxlc2hlZXQiIGhyZWY9InN0eWxlcy5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHA+CiAgICAgIEJ1aWxkaW5nIGdyZWF0IGV4cGVyaWVuY2VzIHRha2VzIHRpbWUsIGNsYXJpdHksIGFuZCBmb2N1cy4gVGhpcyBzcGFjZSBpcwogICAgICByZXNlcnZlZCBmb3IgZnV0dXJlIGNvbnRlbnQgdGhhdCB3aWxsIGd1aWRlLCBpbmZvcm0sIG9yIGluc3BpcmUuIFdoZXRoZXIKICAgICAgaXQncyBhIHN0b3J5LCBhIHByb2R1Y3QgZGVzY3JpcHRpb24sIG9yIGEgbWVzc2FnZSB0byB5b3VyIGF1ZGllbmNlIC0gZXZlcnkKICAgICAgd29yZCBoZXJlIHdpbGwgbWF0dGVyLgogICAgPC9wPgogICAgPHA+CiAgICAgIFVudGlsIHRoZW4sIHRoaW5rIG9mIHRoaXMgYXMgYSBxdWlldCBwbGFjZWhvbGRlci4gU29tZXRoaW5nIHNpbXBsZS4KICAgICAgU29tZXRoaW5nIHdhaXRpbmcgdG8gYmVjb21lIG1lYW5pbmdmdWwuCiAgICA8L3A+CiAgPC9ib2R5Pgo8L2h0bWw+

Podemos observar la diferencia entre la **fuente personalizada** y la **fuente predeterminada**. Además, cada navegador tiene sus propias fuentes predeterminadas. Por lo tanto, es fundamental saber cómo utilizar fuentes personalizadas en un sitio web.

Domina los conceptos esenciales de CSS, el lenguaje de estilos que transforma la apariencia y sensación de las páginas web. Explora conceptos clave como estilos de texto, colores, espaciado, el modelo de caja, Flexbox y efectos decorativos. Desarrolla las habilidades necesarias para crear páginas web visualmente atractivas y bien estructuradas.

Comprender cómo CSS se conecta con HTML y cómo se aplican los estilos mediante selectores.
Aplicación de colores, estilos de texto y efectos hover para controlar la presentación visual.

Mejora de la tipografía utilizando altura de línea, espaciado, propiedades de fuente y fuentes personalizadas. Control de familias tipográficas, grosor, estilo y tamaño de fuente para una mejor legibilidad.

Control de la estructura del diseño utilizando las propiedades de margen, relleno, bordes y ancho. Comprensión del comportamiento de dimensionamiento de cajas y de los tipos de visualización de elementos como block, inline e inline-block.

Control de diseños horizontales y verticales utilizando propiedades de Flexbox. Ajuste de dirección, alineación y espaciado para estructurar componentes de la interfaz de usuario.

Mejora de diseños utilizando colores de fondo, imágenes, pseudoelementos y sombras. Estilización de componentes visuales para profundidad y contraste.

Agregar Fuentes Personalizadas

Servicio de Google Fonts