toolsmoah

Visor de Fuentes de Google

Busca y previsualiza las Fuentes de Google. Encuentra la fuente perfecta para tus proyectos web y mira cómo se ven en tiempo real.

Búsqueda de Fuentes
Busca o filtra las fuentes deseadas.
Roboto
sans-serif•18 estilos
Open Sans
sans-serif•12 estilos
Noto Sans JP
sans-serif•9 estilos
Montserrat
sans-serif•18 estilos
Inter
sans-serif•18 estilos
Poppins
sans-serif•18 estilos
Lato
sans-serif•10 estilos
Material Icons
monospace•1 estilos
Roboto Condensed
sans-serif•18 estilos
Roboto Mono
monospace•14 estilos
Roboto
Sans-serif • 18 estilos
¡Hola! Visor de Fuentes de Google. El rápido zorro marrón salta sobre el perro perezoso. 1234567890
Obtener Código
Copia el código para aplicar fuentes a tus proyectos web.

Pega el código anterior dentro de la etiqueta head de tu archivo HTML.

📚 Guía Completa de Google Fonts

Aprende a usar Google Fonts de manera efectiva

🎨🎨 ¿Qué es Google Fonts?

Google Fonts es un servicio gratuito de fuentes web proporcionado por Google.

  • Más de 1,400 familias de fuentes de código abierto
  • Licencia gratuita para uso comercial
  • Distribución global a través de CDN rápido
  • Soporte para varios idiomas y sistemas de escritura
  • Optimizado para diseño web responsivo

⚡⚡ Cómo Usar Fuentes Web

1. Uso en HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">

2. Aplicación en CSS

body {
  font-family: 'Noto Sans KR', sans-serif;
}

🚀🚀 Consejos de Optimización de Rendimiento

  • Usa font-display: swap para prevenir FOIT
  • Usa preconnect para reducir el tiempo de búsqueda de DNS
  • Carga selectivamente solo los pesos de fuente necesarios
  • Limita los conjuntos de caracteres con el parámetro subset
  • Configura fuentes de respaldo locales

Ejemplo de carga optimizada:

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap&subset=korean" rel="stylesheet">

📱📱 Tipografía Responsiva

Configuración para una legibilidad óptima en varios dispositivos:

/* 반응형 폰트 크기 */
.responsive-text {
  font-size: clamp(1rem, 2.5vw, 2rem);
  line-height: 1.6;
}

/* 디바이스별 폰트 스택 */
.font-stack {
  font-family: 
    'Noto Sans KR', 
    -apple-system, 
    BlinkMacSystemFont, 
    'Segoe UI', 
    sans-serif;
}
  • 모바일: 16px 이상 권장
  • 태블릿: 18px 이상 권장
  • 데스크톱: 20px 이상 권장

🎯🎯 Guía de Selección de Fuentes

Fuentes recomendadas por uso:

  • Texto del cuerpo: Noto Sans KR, Spoqa Han Sans
  • Encabezados: Noto Serif KR, Gowun Dodum
  • Código: Fira Code, JetBrains Mono
  • Decorativas: Jua, Gamja Flower

Criterios de selección:

  • Consistencia con la identidad de la marca
  • Legibilidad y accesibilidad
  • Rango de soporte multilingüe
  • Rendimiento de carga

🔧🔧 Uso Avanzado

Uso de Fuentes Variables:

/* Variable Font 로드 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* 동적 weight 조절 */
.dynamic-weight {
  font-family: 'Inter', sans-serif;
  font-weight: var(--font-weight, 400);
  font-variation-settings: 'wght' var(--font-weight, 400);
}

Uso de Propiedades Personalizadas de CSS:

:root {
  --font-primary: 'Noto Sans KR', sans-serif;
  --font-heading: 'Noto Serif KR', serif;
  --font-mono: 'Fira Code', monospace;
}

h1, h2, h3 { font-family: var(--font-heading); }
body { font-family: var(--font-primary); }
code { font-family: var(--font-mono); }

🛡️🛡️ Consideraciones de Accesibilidad

  • Relación de contraste suficiente: WCAG 4.5:1 o superior
  • Espaciado de línea adecuado: 1.4~1.6 recomendado
  • Tamaño de fuente legible: mínimo 16px
  • Amigable para disléxicos: considerar OpenDyslexic, etc.

Ejemplo de CSS accesible:

.accessible-text {
  font-size: max(16px, 1rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
  word-spacing: 0.1em;
}

🔍🔍 Depuración y Pruebas

Verificación de carga de fuentes:

  • Verificar archivos de fuentes en la pestaña Red de DevTools
  • Verificar fuentes aplicadas reales en estilos calculados
  • Probar el comportamiento de font-display

Herramientas de medición de rendimiento:

  • Google PageSpeed Insights
  • WebPageTest
  • Comprobaciones de optimización de fuentes de Lighthouse

폰트 fallback 테스트:

/* 네트워크 차단 시 fallback 확인 */
font-family: 'Custom Font', 
             'Apple SD Gothic Neo', 
             'Malgun Gothic', 
             sans-serif;

💡💡 Consejos Prácticos

Configuración del proyecto:

  • Definir reglas de fuentes en el sistema de diseño
  • Establecer estrategia de carga de fuentes
  • Configurar pila de fuentes de respaldo
  • Configurar monitoreo de rendimiento

Mantenimiento:

  • Gestión de versiones de fuentes
  • Limpiar pesos no utilizados
  • Comprobaciones regulares de rendimiento
  • Buscar nuevas actualizaciones de fuentes