Un recurso imprescindible para el correcto diseño de un sitio web es añadir Fuentes tipográficas que se adapten al mensaje que queremos transmitir. Pese a que hay fuentes gratuitas y de pago, google nos ofrece un amplio catalogo tipográfico gratuito. Con tipografías que nos servirán para diferentes estilos de diseño.
Para empezar entramos en Google fonts y buscamos el tipo de letra que mejor se ajuste a nuestro proyecto.
Seleccionar la fuente
Cuando tengamos clara las fuente que vamos a usar las añadiremos al "carrito" de selección y este nos generará el código que debemos copiar para integrarla en nuestra web.
Selecciona la fuente que quieres integrar en tu proyecto.
Cuando ya tenemos todo seleccionado, vamos a ver que maneras diferentes tenemos para integrar el código en nuestro proyecto.
Añadir la fuente en <head>
Veamos un ejemplo práctico seleccionando la fuente New Tegomin.
La primera de integración es añadiendo a la sección head de nuestro html usando la etiqueta link. Esta es la etiqueta que vamos a poner:
html<head> ... <link rel="preconnect" href="https://fonts.gstatic.com" /> <link href="https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap" rel="stylesheet" /> ... </head>
Esta forma de integración es la mas sencilla de todas. La pones en el head y te olvidas. Aunque sencillo, no siempre es lo mejor yq qye puede que según sea tu proyecto no quieras cargar esa tipografía en todas las páginas.
Añadir la fuente usando @import
Otra forma de incluir la fuente es mediante la sentencia @import dentro de un archivo css. Veamos un ejemplo de como quedaría.
css@import url("https://fonts.googleapis.com/css2?family=New+Tegomin:wght@100;200;300;400;500;600;700;800;900&display=swap");
Si no disponemos de un archivo .css que editar, podemos incluir los estilos en línea en el propio html usando la etiqueta style.
html<style> @import url("https://fonts.googleapis.com/css2?family=New+Tegomin:wght@100;200;300;400;500;600;700;800;900&display=swap"); </style>
Usar la fuente
Para usar las nuevas fuentes al dar estilos a las etiquetas de nuestro sitio web debemos especificarlo con la propiedad font-family.
En este ejemplo, indicamos que el texto dentro de las etiquetas con la clase class="card-text" usarán la tipografia seleccionada.
En el html:
html<div class="card-text">...</div>
En el css:
css.card-text { font-family: "New Tegomin"; }
Si no disponemos de css podemos poner un estilo inline en el html
html<div style="font-family:New Tegomin">...</div>
Resultados
Antes:
Después:
Bootcamp Desarrollo Web FullStack
Bootcamp Desarrollo Web FullStack