ClaudeCodeLab
Advanced

Optimizacion de fuentes con Claude Code

Aprenda sobre optimizacion de fuentes usando Claude Code. Incluye consejos practicos y ejemplos de codigo.

Mejorando la velocidad de carga con la optimizacion de fuentes web

Las fuentes web mejoran la calidad del diseno, pero sin optimizacion pueden afectar significativamente la velocidad de carga. Con Claude Code, puede implementar eficientemente desde el subsetting de fuentes hasta las estrategias de carga.

Configuracion adecuada de font-display

> Optimiza la carga de fuentes web.
> Configura para prevenir FOUT y FOIT sin perjudicar la experiencia del usuario.
/* Uso diferenciado de font-display */
@font-face {
  font-family: 'Noto Sans JP';
  src: url('/fonts/NotoSansJP-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Mostrar texto inmediatamente y reemplazar cuando se cargue la fuente */
}

@font-face {
  font-family: 'Noto Sans JP';
  src: url('/fonts/NotoSansJP-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Fuente importante como titulos hero */
@font-face {
  font-family: 'Display Font';
  src: url('/fonts/display.woff2') format('woff2');
  font-weight: 700;
  font-display: optional; /* Usar fuente del sistema como alternativa si la red es lenta */
}

Precarga con Preload

<head>
  <!-- Precargar fuentes criticas -->
  <link rel="preload" href="/fonts/NotoSansJP-Regular.woff2" 
        as="font" type="font/woff2" crossorigin />
  <link rel="preload" href="/fonts/NotoSansJP-Bold.woff2" 
        as="font" type="font/woff2" crossorigin />
</head>

Subsetting de fuentes japonesas

> Haz un subset de la fuente japonesa solo con los caracteres necesarios.
> Cubriendo JIS nivel 1 y 2, y kanji de uso comun.
// scripts/subset-font.ts
import { execSync } from 'child_process';
import { readFileSync, writeFileSync } from 'fs';

// Subsetting usando pyftsubset
function subsetFont(inputPath: string, outputPath: string, unicodeRange: string) {
  execSync(
    `pyftsubset ${inputPath} ` +
    `--output-file=${outputPath} ` +
    `--flavor=woff2 ` +
    `--layout-features='*' ` +
    `--unicode-range="${unicodeRange}"`
  );
}

// Division de rangos Unicode (chunking)
const chunks = [
  { name: 'latin', range: 'U+0000-007F,U+2000-206F,U+2070-209F' },
  { name: 'kana', range: 'U+3000-303F,U+3040-309F,U+30A0-30FF,U+FF00-FFEF' },
  { name: 'kanji-1', range: 'U+4E00-5FFF' },
  { name: 'kanji-2', range: 'U+6000-7FFF' },
  { name: 'kanji-3', range: 'U+8000-9FFF' },
];

for (const chunk of chunks) {
  subsetFont(
    'src/fonts/NotoSansJP-Regular.ttf',
    `public/fonts/NotoSansJP-${chunk.name}.woff2`,
    chunk.range
  );
}
/* Carga dividida por unicode-range */
@font-face {
  font-family: 'Noto Sans JP';
  src: url('/fonts/NotoSansJP-latin.woff2') format('woff2');
  unicode-range: U+0000-007F, U+2000-206F;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans JP';
  src: url('/fonts/NotoSansJP-kana.woff2') format('woff2');
  unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans JP';
  src: url('/fonts/NotoSansJP-kanji-1.woff2') format('woff2');
  unicode-range: U+4E00-5FFF;
  font-display: swap;
}

Uso de fuentes variables (Variable Fonts)

@font-face {
  font-family: 'Inter Variable';
  src: url('/fonts/Inter-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'Inter Variable', sans-serif;
  font-weight: 400;
}

/* Un solo archivo cubre todos los pesos */
h1 { font-weight: 800; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }
.caption { font-weight: 300; }

Ajuste de metricas de fuente de respaldo

/* Ajuste de tamano para prevenir CLS */
@font-face {
  font-family: 'Adjusted Arial';
  src: local('Arial');
  size-adjust: 105%;
  ascent-override: 90%;
  descent-override: 20%;
  line-gap-override: 0%;
}

body {
  font-family: 'Noto Sans JP', 'Adjusted Arial', sans-serif;
}

Monitoreo del estado de carga de fuentes

// Detectar finalizacion de carga con Font Loading API
async function waitForFonts() {
  if ('fonts' in document) {
    await document.fonts.ready;
    document.documentElement.classList.add('fonts-loaded');
  }
}

// Verificar la carga de una fuente especifica
async function loadCriticalFont() {
  const font = new FontFace(
    'Noto Sans JP',
    'url(/fonts/NotoSansJP-Regular.woff2)'
  );
  
  try {
    const loaded = await font.load();
    document.fonts.add(loaded);
    console.log('Carga de fuente completada');
  } catch (err) {
    console.error('Error al cargar la fuente:', err);
  }
}

Resumen

La optimizacion de fuentes es una de las medidas mas efectivas dentro de la optimizacion de rendimiento. Con Claude Code, puede implementar eficientemente desde scripts de subsetting hasta la division por unicode-range. Trabajar en paralelo con la optimizacion de imagenes puede mejorar significativamente la velocidad de carga de la pagina. Para la optimizacion de Google Fonts, web.dev tambien es una buena referencia.

#Claude Code #optimizacion de fuentes #performance #Web Fonts #velocidad de carga

Related Posts