Cheatsheet: Google Fonts en la práctica
Antes de arrancar el ejercicio, este es el patrón completo de referencia para integrar cualquier fuente de Google Fonts:
En el <head> del HTML:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=NombreFuente&display=swap">En el CSS:
body {
font-family: NombreFuente, sans-serif;
}Los dos pasos son independientes:
- El
<link>importa la fuente al navegador (o lo intenta — en el sandbox no hay red). font-familyaplica la fuente a los elementos. Sin esta declaración, la fuente descarga pero el texto sigue con la tipografía por defecto.
Sobre el sandbox: el preview no puede descargar fuentes externas — el texto no se verá en Roboto. El ejercicio valida que la integración esté bien armada: los tres
<link>correctos en el<head>y lafont-family: Roboto, sans-serifdeclarada en elbody. Eso es suficiente para confirmar que sabés integrar Google Fonts en una página real.
Declarar una web font con Google Fonts
El sandbox no puede descargar fuentes externas — el texto seguirá viéndose con la fuente del sistema. Lo que validamos es que la integración esté bien armada: el `<link>` correcto en el `<head>` y la `font-family` declarada en el CSS. Integrá la fuente **Roboto** de Google Fonts en esta página: 1. Agregá estos tres elementos en el `<head>`, **en este orden**: ```html <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"> ``` 2. En el `<style>` que ya está en el `<head>`, aplicá la fuente al `body`: ```css body { font-family: Roboto, sans-serif; } ``` Usá exactamente los valores pedidos — el `href` del stylesheet debe ser el string exacto.
Preview