0Pricing
CSS Academy · Lección

Google Fonts y @font-face

Cargue fuentes externas desde Google Fonts o defina fuentes personalizadas mediante la regla @font-face.

Google Fonts y @font-face es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.

¿Por qué usar fuentes personalizadas?

Las fuentes seguras para la web ofrecen solo unas pocas opciones. Las fuentes personalizadas permiten adaptar con precisión la identidad de una marca. Los dos enfoques principales son Google Fonts (servicio alojado) y @font-face (autoalojado).

Configuración de Google Fonts

Visite fonts.google.com, seleccione una familia tipográfica, elija los pesos y copie la etiqueta <link> en el <head> de su HTML:

<p>Add these tags to your document's <code>&lt;head&gt;</code>:</p>
<pre><code>&lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
&lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap" rel="stylesheet"&gt;</code></pre>

Uso de Google Fonts en CSS

Después de añadir el enlace, haga referencia a la fuente por su nombre en la lista de font-family:

<h1>Playfair Display Heading</h1>
<p>Roboto body text below the heading.</p>

Parámetros de la API de Google Fonts

El parámetro display=swap utiliza la estrategia Font Display Swap: el texto se muestra inmediatamente con la fuente alternativa y después se cambia a la fuente personalizada cuando esta se carga. Así se evita que el texto permanezca invisible durante la carga.

Conceptos básicos de @font-face

@font-face permite cargar un archivo de fuente personalizada que usted aloja. Defina el nombre de la familia tipográfica y el origen del archivo:

<p class="brand-text">Custom brand typeface text</p>

WOFF2: el formato moderno

WOFF2 (Web Open Font Format 2) es el formato recomendado. Ofrece la mejor compresión (normalmente un 30 % menos que WOFF) y es compatible con todos los navegadores modernos. Incluya siempre WOFF como alternativa.

Varios pesos con @font-face

Declare un bloque @font-face por cada combinación de peso y estilo. Use el mismo nombre de font-family para que el navegador seleccione automáticamente el archivo adecuado:

<p>Regular weight 400 text with <strong>bold weight 700 text</strong> inline.</p>

Propiedad font-display

El descriptor font-display controla el comportamiento de carga de la fuente:

  • swap — muestra la fuente alternativa inmediatamente y la cambia cuando está lista (recomendado)
  • block — muestra el texto invisible durante un máximo de 3 segundos
  • fallback — aplica un breve periodo de bloqueo y después usa permanentemente la fuente alternativa
  • optional — la usa solo si ya está almacenada en la caché
<p class="swap-text">Text swaps in once Inter loads.</p>

@font-face para fuentes variables

Las fuentes variables definen rangos de ejes en lugar de valores de peso fijos:

<p class="variable-text">Variable weight text (550)</p>

Precarga de fuentes críticas

Precargue el archivo de fuente más importante para reducir el retraso que bloquea la representación. Añada un <link rel="preload"> antes de la hoja de estilos:

<p>Add this to your document's <code>&lt;head&gt;</code> to preload the font file:</p>
<pre><code>&lt;link rel="preload" href="./fonts/inter.woff2" as="font" type="font/woff2" crossorigin&gt;</code></pre>

local() para evitar descargas

Use local() en src para comprobar si el usuario ya tiene instalada la fuente antes de descargarla:

<p class="roboto-text">Uses local Roboto if installed</p>

Comprobación rápida

¿Qué formato de fuente ofrece la mejor compresión y la compatibilidad más amplia con los navegadores modernos?

Resumen

Google Fonts proporciona fuentes alojadas de forma sencilla mediante una etiqueta <link>. Aloje sus propias fuentes con @font-face usando el formato WOFF2 y font-display: swap para obtener el mejor rendimiento. Precargue las fuentes críticas y use local() para evitar descargas innecesarias.

Preguntas frecuentes

¿La lección «Google Fonts y @font-face» es gratis?

Sí — el texto completo de «Google Fonts y @font-face» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Google Fonts y @font-face»?

Cargue fuentes externas desde Google Fonts o defina fuentes personalizadas mediante la regla @font-face. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar CSS Academy?

No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Google Fonts y @font-face»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de CSS Academy?

Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Familias tipográficas y fuentes seguras para la web
  2. Tamaño, peso y estilo de fuente
  3. Alineación, decoración y espaciado del texto
  4. Google Fonts y @font-face
← Volver a CSS Academy