css
fonts
google
Google Fonts
Podemos añadir tantos recursos externos a nuestro proyecto como queramos. Un ejemplo de ello son los tipos de letra, comúnmente conocidos como fuentes.
Para ello acudimos a Google fonts y buscamos el tipo de letra que mejor se ajuste a nuestro proyecto:
Para vincularlo, haz click en + Select this style y copia y pega los enlaces mostrados en el header de tu index.html:
Seleccionar la fuente
Añadir a nuestra página
Veamos un ejemplo práctico seleccionando la fuente New Tegomin:
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Nuestros enlaces externos : --> <link rel="preconnect" href="https://fonts.gstatic.com" /> <link href="https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="./style.css" /> <title>Document</title> </head> <body> <p class="card-text">Hello world</p> </body> </html>Copiar
Usar la fuente en CSS
Para añadir las nuevas fuentes debemos especificar la propiedad font-family en el elemento o clase:
css.card-text { font-family: "New Tegomin"; }Copiar
Antes:
Después:
Actualizado 18 jun 2022