ESTILOS Y DISEÑO WEB

Tipografías: Más allá de Arial y Times

El diseño web moderno exige identidad visual. Aprende a implementar fuentes personalizadas con @font-face y servicios como Google Fonts, superando las limitaciones del sistema.

1

Fuentes del Sistema: El Punto de Partida

Durante muchos años, el diseño web dependió exclusivamente de las fuentes instaladas en el sistema operativo del usuario. Esto garantizaba compatibilidad y velocidad, pero limitaba la identidad visual de los sitios. Fuentes como Arial, Times New Roman o Verdana eran seguras, pero poco expresivas. Para resolver esta limitación surgieron las tipografías personalizadas en la web.

2

Cargando Fuentes Locales con @font-face

La regla @font-face permite definir fuentes personalizadas alojadas dentro de tu propio proyecto. El navegador descarga el archivo tipográfico y lo utiliza aunque el usuario no lo tenga instalado. Esta técnica es ideal para proyectos con identidad visual fuerte o cuando se necesita independencia de servicios externos.

/* Registro de una fuente personalizada */
@font-face {
  /* Nombre que usará CSS para referirse a la fuente */
  font-family: 'MiFuentePersonal';

  /* Ruta relativa al archivo de la fuente */
  src: url('./fonts/mifuente-regular.woff2');
}

/* Uso de la fuente registrada */
body {
  font-family: 'MiFuentePersonal', sans-serif;
}
Publicidad
html-css-online-course-responsive-web-design-from-scratch
Aprendé desde cero con clases 100% en vivo, grupos súper reducidos y acompañamiento real. Todo el contenido está diseñado y dictado por el creador de la plataforma, para que aprendas de verdad, sin videos fríos ni cursos masivos.

Curso de HTML y CSS para Frontend

Dominá las bases de la programación frontend: estructura con HTML, estilos modernos con CSS y diseño rápido con Tailwind para lanzar tus primeros sitios responsivos y profesionales.10 clases en vivo con profesores expertos
Precio $150000 ARG Oferta especial
Ver próximas fechas
3

Estructura Correcta de Archivos de Fuentes

Una buena organización de archivos evita errores y facilita el mantenimiento del proyecto. Las fuentes deben almacenarse en una carpeta específica, normalmente llamada `fonts`. El CSS debe apuntar correctamente a esa ruta para que el navegador pueda encontrar y cargar los archivos tipográficos.

<!-- Estructura recomendada del proyecto -->
<!--
proyecto-web/
│── index.html
│── css/
│   └── styles.css
│── fonts/
│   ├── mifuente-regular.woff2
│   └── mifuente-bold.woff2
-->
4

Cargando Google Fonts directamente desde CSS

Además de enlazarlas desde el HTML, las fuentes de Google Fonts también pueden importarse directamente dentro del archivo CSS utilizando la regla @import. Este enfoque centraliza la gestión tipográfica en CSS y es común en proyectos pequeños o cuando se trabaja con hojas de estilo externas.

/* Importación de una fuente desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');

/* A partir de aquí, la fuente queda disponible */
5

Aplicando la Fuente Importada desde CSS

Una vez que la fuente fue importada mediante @import, puede utilizarse normalmente con la propiedad font-family. Siempre es buena práctica definir una tipografía de respaldo para garantizar legibilidad si la fuente web no llega a cargarse.

/* Uso de la fuente importada desde Google Fonts */
body {
  /* Fuente principal y alternativa de respaldo */
  font-family: 'Roboto Slab', serif;
}
6

Fuentes Locales vs Fuentes Web

Elegir entre fuentes locales o fuentes web depende del contexto del proyecto. Las fuentes locales ofrecen control total, mientras que los CDN simplifican la implementación y mejoran el cacheo. No existe una única respuesta correcta: la decisión debe equilibrar rendimiento, control y facilidad de mantenimiento.

Comparativa entre tipografías locales y web
Cada estrategia tipográfica tiene ventajas según el tipo de proyecto.

Lección anterior

Relación entre unidades de medida CSS y distintos tamaños de pantalla
Las unidades de medida en CSS definen cómo un diseño se adapta al contexto, al dispositivo y al usuario.

Unidades de Medida en CSS

Elige las unidades correctas en CSS. Domina px, rem, em, % y unidades viewport para crear interfaces accesibles, fluidas y escalables en cualquier dispositivo.

Comenzar Lección

Lección actual

Composición artística de letras y glifos de diferentes familias tipográficas
La elección tipográfica define el carácter y la legibilidad de tu interfaz web.

Tipografías: Más allá de Arial y Times

El diseño web moderno exige identidad visual. Aprende a implementar fuentes personalizadas con @font-face y servicios como Google Fonts, superando las limitaciones del sistema.

Lección actual

Lección siguiente

Diagrama del CSS Box Model mostrando content, padding, border y margin
El Box Model explica cómo el navegador mide, separa y renderiza cada elemento en pantalla.

CSS Box Model

El Box Model es fundamental en CSS. Aprende cómo el navegador maneja cada elemento como una caja, el cálculo de dimensiones con padding y bordes, y evita errores comunes en tus layouts.

Comenzar Lección
¿Qué formatos de fuente debo usar?⌄El estándar moderno es **WOFF2** (Web Open Font Format 2) porque ofrece la mejor compresión. WOFF es la alternativa compatible, y TTF/OTF suelen usarse como respaldo para navegadores muy antiguos.
¿Por qué veo un parpadeo en el texto al cargar la página?⌄Es el fenómeno FOUT (Flash of Unstyled Text). Ocurre mientras el navegador descarga la fuente personalizada. Se puede mitigar usando la propiedad `font-display: swap;`, que muestra una fuente básica inmediatamente y la cambia por la personalizada cuando está lista.
¿Es legal descargar cualquier fuente y usarla en mi web?⌄No. Debes verificar la licencia. Google Fonts es gratuito (licencia Open Font License), pero muchas fuentes comerciales requieren comprar una licencia específica para uso web ('webfont license').
¿Puedo usar @font-face con una URL externa?⌄Sí, el `src` puede ser una dirección web absoluta (https://...), pero debes asegurarte de que el servidor donde está alojada la fuente permita el acceso (CORS), o el navegador bloqueará la descarga por seguridad.
¿Qué significa la familia de respaldo 'serif' o 'sans-serif'?⌄Es la red de seguridad. Si la fuente personalizada falla o tarda en cargar, el navegador usará la fuente por defecto de esa categoría (ej: Times New Roman para serif, Arial para sans-serif) para asegurar que el texto siga siendo legible.