Tutorial CSS: Estilos de fuente

Propiedades font-family y sistema de fuentes genéricas

La tipografía es uno de los elementos fundamentales en el diseño web, ya que afecta directamente a la legibilidad y personalidad de nuestro sitio. CSS nos permite controlar qué fuentes se utilizan en nuestras páginas mediante la propiedad font-family.

Sintaxis básica de font-family

La propiedad font-family permite especificar una lista priorizada de fuentes que el navegador intentará utilizar para mostrar el texto. Su sintaxis es sencilla:

selector {
  font-family: fuente1, fuente2, fuente3, familia-genérica;
}

El navegador intentará utilizar la primera fuente de la lista. Si esta no está disponible en el sistema del usuario, probará con la segunda, y así sucesivamente. Por eso es importante terminar siempre con una familia genérica como respaldo.

p {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

En este ejemplo, el navegador intentará usar primero "Helvetica Neue". Si no está disponible, usará Arial, y si ninguna de las dos está disponible, utilizará cualquier fuente sans-serif que tenga el sistema.

Nombres de fuentes con espacios

Cuando el nombre de una fuente contiene espacios, debe escribirse entre comillas:

h1 {
  font-family: "Times New Roman", Georgia, serif;
}

Sin las comillas, el navegador interpretaría "Times New Roman" como tres fuentes diferentes: "Times", "New" y "Roman".

Familias de fuentes genéricas

CSS define cinco familias genéricas que garantizan que, independientemente del sistema operativo o navegador, siempre se mostrará algún tipo de fuente. Estas familias son:

• serif: Fuentes con pequeños trazos o remates en los extremos de los caracteres. Ejemplo:

h2 {
  font-family: Georgia, "Times New Roman", serif;
}

• sans-serif: Fuentes sin remates, con un aspecto más limpio y moderno. Ejemplo:

body {
  font-family: Arial, Helvetica, sans-serif;
}

• monospace: Fuentes donde todos los caracteres ocupan el mismo ancho, ideales para código. Ejemplo:

code {
  font-family: "Courier New", Courier, monospace;
}

• cursive: Fuentes que imitan la escritura a mano con caracteres conectados. Ejemplo:

.firma {
  font-family: "Comic Sans MS", "Brush Script MT", cursive;
}

• fantasy: Fuentes decorativas o de exhibición, generalmente para títulos o elementos destacados. Ejemplo:

.titulo-creativo {
  font-family: Impact, "Papyrus", fantasy;
}

Combinando fuentes específicas con genéricas

La estrategia recomendada es combinar fuentes específicas con una familia genérica como respaldo:

.contenido {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

Esta técnica garantiza que:

1. Se intente usar Verdana (presente en la mayoría de sistemas)
2. Si no está disponible, se pruebe con Geneva
3. Si tampoco está, se use Tahoma
4. En último caso, cualquier fuente sans-serif disponible

Fuentes seguras para web (Web Safe Fonts)

Existen algunas fuentes que están ampliamente disponibles en diferentes sistemas operativos. Estas se conocen como "fuentes seguras para web":

• Sans-serif: Arial, Verdana, Helvetica, Tahoma
• Serif: Times New Roman, Georgia, Garamond
• Monospace: Courier New, Lucida Console

p {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-family: Georgia, "Times New Roman", serif;
}

pre {
  font-family: "Courier New", monospace;
}

Consideraciones prácticas

Al seleccionar fuentes para tu proyecto web, ten en cuenta estos factores importantes:

• Disponibilidad: Las fuentes deben estar instaladas en el dispositivo del usuario o cargarse mediante servicios como Google Fonts.

• Legibilidad: Algunas fuentes son más legibles que otras, especialmente en tamaños pequeños o en pantallas de baja resolución.

• Consistencia: Limita el número de fuentes diferentes en tu sitio (generalmente 2-3) para mantener una apariencia coherente.

/* Ejemplo de uso consistente de fuentes */
body {
  font-family: Roboto, Arial, sans-serif; /* Fuente principal para el contenido */
}

h1, h2, h3 {
  font-family: "Playfair Display", Georgia, serif; /* Fuente para títulos */
}

code, pre {
  font-family: "Source Code Pro", "Courier New", monospace; /* Fuente para código */
}

Este enfoque proporciona una jerarquía visual clara mientras mantiene la coherencia en todo el sitio web.

Compatibilidad entre navegadores

La propiedad font-family tiene excelente soporte en todos los navegadores modernos. Sin embargo, la disponibilidad de las fuentes específicas varía según el sistema operativo del usuario, por lo que siempre es importante incluir alternativas adecuadas y terminar con una familia genérica.

/* Ejemplo de declaración robusta */
.texto-principal {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

Esta declaración utiliza las fuentes del sistema en diferentes plataformas (macOS, Windows, Linux) antes de recurrir a opciones más genéricas, garantizando una experiencia consistente para todos los usuarios.

Control de tamaño con font-size y valores relativos vs absolutos

El tamaño de la fuente es un aspecto fundamental en el diseño web que afecta directamente a la legibilidad y jerarquía visual de nuestro contenido. CSS nos permite controlar este aspecto mediante la propiedad font-size, que admite diferentes tipos de unidades para definir el tamaño del texto.

La propiedad font-size determina la altura de los caracteres en el texto. Su sintaxis básica es:

selector {
  font-size: valor;
}

Donde el valor puede expresarse en diferentes unidades que se clasifican en dos categorías principales: absolutas y relativas.

Unidades absolutas

Las unidades absolutas tienen un tamaño fijo que no cambia independientemente del contexto. La más común en entornos digitales es:

• px (píxeles): Define un tamaño exacto en píxeles de pantalla.

h1 {
  font-size: 24px;
}

p {
  font-size: 16px;
}

Los píxeles ofrecen un control preciso sobre el tamaño del texto, pero presentan limitaciones importantes:

• No se ajustan cuando el usuario cambia la configuración de tamaño de texto del navegador
• No escalan bien en diferentes dispositivos y resoluciones
• Pueden crear problemas de accesibilidad para usuarios con necesidades visuales especiales

Otras unidades absolutas como pt (puntos), cm (centímetros) o in (pulgadas) se utilizan principalmente para medios impresos y no son recomendables para diseño web.

Unidades relativas

Las unidades relativas definen el tamaño en relación a otro valor, lo que las hace más flexibles y adecuadas para diseños responsivos. Las más utilizadas son:

• em: Relativa al tamaño de fuente del elemento padre

body {
  font-size: 16px; /* Base para cálculos em */
}

h1 {
  font-size: 2em; /* 2 × 16px = 32px */
}

.destacado {
  font-size: 1.5em; /* 1.5 × tamaño heredado */
}

La unidad em es proporcional al tamaño de fuente del elemento contenedor. Esto permite crear diseños escalables, pero puede complicarse en estructuras anidadas debido al efecto de "cascada" (cada nivel hereda y multiplica el tamaño).

• rem: Relativa al tamaño de fuente del elemento raíz (root)

html {
  font-size: 16px; /* Tamaño base para toda la página */
}

h1 {
  font-size: 2rem; /* 2 × 16px = 32px */
}

.nota {
  font-size: 0.875rem; /* 0.875 × 16px = 14px */
}

La unidad rem siempre se calcula respecto al tamaño de fuente del elemento html, evitando el problema de la cascada de los em. Esto facilita mantener proporciones consistentes en todo el sitio.

• %: Porcentaje relativo al tamaño de fuente del elemento padre

body {
  font-size: 16px;
}

h2 {
  font-size: 150%; /* 150% de 16px = 24px */
}

El comportamiento de los porcentajes es similar al de los em (1em = 100%).

• vw/vh: Relativas al ancho (vw) o alto (vh) de la ventana del navegador

h1 {
  font-size: 5vw; /* 5% del ancho de la ventana */
}

.hero-text {
  font-size: 3vh; /* 3% de la altura de la ventana */
}

Estas unidades son especialmente útiles para diseños responsivos donde el texto debe escalarse proporcionalmente al tamaño de la pantalla.

Comparativa: Relativas vs Absolutas

Para entender mejor las diferencias, veamos una comparativa:

Enfoque práctico: Sistema de escalado tipográfico

Un enfoque recomendado es establecer un tamaño base en el elemento raíz y luego utilizar unidades relativas para el resto de elementos:

html {
  font-size: 16px; /* Tamaño base */
}

body {
  font-size: 1rem; /* Igual al tamaño base */
}

h1 {
  font-size: 2.5rem; /* 40px */
}

h2 {
  font-size: 2rem; /* 32px */
}

h3 {
  font-size: 1.5rem; /* 24px */
}

small {
  font-size: 0.875rem; /* 14px */
}

Este sistema crea una jerarquía tipográfica clara y permite ajustar toda la escala modificando únicamente el tamaño base.

Diseño responsivo con media queries

Podemos combinar unidades relativas con media queries para ajustar el tamaño de texto según el dispositivo:

html {
  font-size: 16px;
}

h1 {
  font-size: 2rem; /* 32px en pantallas normales */
}

/* En pantallas pequeñas */
@media (max-width: 768px) {
  html {
    font-size: 14px; /* Reducimos el tamaño base */
  }
  
  h1 {
    font-size: 1.8rem; /* Ahora es 25.2px (1.8 × 14px) */
  }
}

Este enfoque permite adaptar toda la tipografía con cambios mínimos en el código.

Funciones de tamaño: clamp(), min() y max()

Las funciones modernas de CSS permiten un control aún más flexible del tamaño de fuente:

h1 {
  /* Tamaño entre 24px y 5vw, con preferencia por 5vw */
  font-size: max(24px, 5vw);
}

p {
  /* Tamaño entre 16px y 3vw, con preferencia por 16px */
  font-size: min(16px, 3vw);
}

.responsive-title {
  /* Tamaño entre 18px y 32px, que escala con 4vw */
  font-size: clamp(18px, 4vw, 32px);
}

La función clamp() es especialmente útil ya que establece un rango de tamaños con un valor mínimo, un valor preferido (que puede ser relativo) y un valor máximo.

Consideraciones de accesibilidad

Al definir tamaños de fuente, es importante considerar la accesibilidad:

• Evita usar unidades absolutas como única opción
• No establezcas tamaños de texto menores a 16px para texto principal
• Asegúrate de que el contraste entre texto y fondo sea suficiente
• Prueba tu diseño con diferentes configuraciones de zoom

/* Enfoque accesible */
body {
  font-size: 1rem; /* Respeta las preferencias del usuario */
  line-height: 1.5; /* Mejora la legibilidad */
}

.texto-pequeño {
  font-size: 0.875rem; /* No menor a ~14px */
}

Siguiendo estas prácticas, crearás diseños tipográficos que sean tanto estéticamente agradables como funcionales para todos los usuarios.

Propiedades font-weight, font-style y font-variant

Además del tipo y tamaño de fuente, CSS nos ofrece varias propiedades para controlar la apariencia visual del texto. Las propiedades font-weight, font-style y font-variant nos permiten modificar aspectos específicos de la tipografía sin cambiar la familia de fuentes.

Propiedad font-weight

La propiedad font-weight controla el grosor o peso de los caracteres en el texto. Podemos especificar este valor de dos maneras:

• Usando palabras clave:

p {
  font-weight: normal;
}

h1 {
  font-weight: bold;
}

• Usando valores numéricos (del 100 al 900, en múltiplos de 100):

.light {
  font-weight: 300;
}

.regular {
  font-weight: 400; /* Equivalente a normal */
}

.medium {
  font-weight: 500;
}

.bold {
  font-weight: 700; /* Equivalente a bold */
}

.extra-bold {
  font-weight: 800;
}

Los valores numéricos ofrecen un control más preciso sobre el grosor, especialmente cuando trabajamos con fuentes que tienen múltiples pesos disponibles. La escala estándar incluye:

• 100 - Thin (Extra Light)
• 200 - Extra Light (Ultra Light)
• 300 - Light
• 400 - Normal (Regular)
• 500 - Medium
• 600 - Semi Bold (Demi Bold)
• 700 - Bold
• 800 - Extra Bold (Ultra Bold)
• 900 - Black (Heavy)

Es importante tener en cuenta que no todas las fuentes incluyen todos estos pesos. Si especificamos un peso que no está disponible, el navegador utilizará el peso más cercano disponible.

/* Ejemplo práctico con diferentes pesos */
.articulo h1 {
  font-weight: 800; /* Título muy destacado */
}

.articulo h2 {
  font-weight: 600; /* Subtítulo menos destacado */
}

.articulo p {
  font-weight: 400; /* Texto normal para el contenido */
}

.articulo .destacado {
  font-weight: 500; /* Ligeramente más destacado que el texto normal */
}

También podemos usar las palabras clave lighter y bolder, que establecen el peso relativo al elemento padre:

.contenedor {
  font-weight: normal; /* 400 */
}

.contenedor .mas-ligero {
  font-weight: lighter; /* Más ligero que el padre */
}

.contenedor .mas-grueso {
  font-weight: bolder; /* Más grueso que el padre */
}

Propiedad font-style

La propiedad font-style determina si el texto debe mostrarse en estilo normal, itálico u oblicuo. Sus valores posibles son:

.texto-normal {
  font-style: normal;
}

.texto-italico {
  font-style: italic; /* Versión itálica diseñada específicamente */
}

.texto-oblicuo {
  font-style: oblique; /* Versión inclinada generada artificialmente */
}

La diferencia entre italic y oblique es sutil pero importante:

• italic utiliza una versión específicamente diseñada de la fuente con caracteres itálicos, que pueden tener formas ligeramente diferentes a la versión normal.
• oblique simplemente inclina los caracteres de la versión normal, generalmente en un ángulo de 14-16 grados.

/* Uso práctico de font-style */
blockquote {
  font-style: italic; /* Citas en itálica */
}

em {
  font-style: italic; /* Énfasis en itálica */
}

.definicion {
  font-style: normal; /* Asegura que el texto se muestre normal */
}

Para oblique, también podemos especificar un ángulo de inclinación:

.texto-inclinado {
  font-style: oblique 20deg; /* Inclinación de 20 grados */
}

Sin embargo, este valor con ángulo específico tiene soporte limitado en algunos navegadores antiguos.

Propiedad font-variant

La propiedad font-variant permite aplicar variaciones tipográficas al texto. El valor más común es small-caps, que convierte las letras minúsculas en mayúsculas de tamaño reducido:

.titulo-elegante {
  font-variant: small-caps;
}

.texto-normal {
  font-variant: normal;
}

Con small-caps, las letras minúsculas se muestran como versalitas (mayúsculas de menor tamaño), mientras que las mayúsculas mantienen su tamaño normal:

/* Ejemplo de uso de small-caps */
.abreviatura {
  font-variant: small-caps;
}

Esto produciría un efecto donde "CSS" y "css" se verían similares, pero las letras de "css" serían ligeramente más pequeñas.

En CSS moderno, font-variant se ha expandido con propiedades más específicas:

.texto-avanzado {
  /* Activa características OpenType específicas */
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  font-variant-caps: small-caps;
}

Estas propiedades específicas ofrecen un control más granular sobre diferentes aspectos tipográficos:

• font-variant-ligatures: Controla la unión de caracteres adyacentes (como fi, fl)
• font-variant-caps: Controla el uso de mayúsculas alternativas
• font-variant-numeric: Controla la presentación de números
• font-variant-east-asian: Controla la presentación de caracteres de Asia Oriental

/* Ejemplo de uso avanzado */
.texto-profesional {
  /* Activa ligaduras comunes y contextuales */
  font-variant-ligatures: common-ligatures contextual;
  
  /* Usa números de estilo antiguo y fracciones */
  font-variant-numeric: oldstyle-nums proportional-nums diagonal-fractions;
  
  /* No usa versalitas */
  font-variant-caps: normal;
}

Combinando propiedades para efectos tipográficos

Estas propiedades pueden combinarse para crear estilos tipográficos distintivos:

.titulo-seccion {
  font-weight: 700;
  font-style: normal;
  font-variant: small-caps;
}

.cita-destacada {
  font-weight: 500;
  font-style: italic;
  font-variant: normal;
}

.nota-tecnica {
  font-weight: 400;
  font-style: normal;
  font-variant-numeric: tabular-nums; /* Números de ancho fijo */
}

Consideraciones de compatibilidad

Al utilizar estas propiedades, es importante tener en cuenta:

• No todas las fuentes incluyen versiones itálicas o pesos variados. Si no están disponibles, el navegador puede simularlos o usar la versión más cercana.
• Las propiedades font-variant más específicas tienen soporte variable en navegadores antiguos.
• Algunas características tipográficas avanzadas solo están disponibles en fuentes OpenType con soporte para esas características.

/* Enfoque progresivo para compatibilidad */
.texto-especial {
  /* Solución básica para todos los navegadores */
  font-variant: small-caps;
  
  /* Solución avanzada para navegadores modernos */
  font-variant-caps: small-caps;
  font-variant-ligatures: common-ligatures;
}

Ejemplos prácticos

Veamos algunos ejemplos prácticos de cómo estas propiedades pueden mejorar la jerarquía visual y la legibilidad de nuestro contenido:

/* Estilo para un blog */
.blog-title {
  font-weight: 800;
  font-style: normal;
  font-variant: normal;
}

.blog-meta {
  font-weight: 400;
  font-style: italic;
  font-variant: normal;
}

.blog-content {
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
}

.blog-content strong {
  font-weight: 600; /* Más sutil que bold (700) */
}

.blog-content .caption {
  font-weight: 300;
  font-style: italic;
}

.blog-content .abbreviation {
  font-variant: small-caps;
}

Este conjunto de estilos crea una jerarquía clara entre los diferentes elementos del blog, utilizando sutiles variaciones en el peso, estilo y variante de la fuente.

Rendimiento tipográfico

Es importante considerar el rendimiento al utilizar múltiples variaciones de fuente:

• Cada peso, estilo o variante puede requerir la carga de un archivo de fuente adicional
• Limita el número de variaciones para mejorar los tiempos de carga
• Considera usar la propiedad font-display para controlar cómo se muestra el texto mientras se cargan las fuentes

@font-face {
  font-family: 'Mi Fuente';
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Muestra texto con fuente alternativa mientras carga */
  src: url('mifuente-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Mi Fuente';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('mifuente-bold.woff2') format('woff2');
}

Utilizando estas propiedades de manera estratégica, podemos crear diseños tipográficos expresivos y funcionales que mejoren la experiencia del usuario sin sacrificar el rendimiento.

Shorthand font y orden de declaración correcto

Cuando trabajamos con tipografía en CSS, podemos encontrarnos definiendo múltiples propiedades relacionadas con fuentes para un mismo elemento. Para simplificar nuestro código y hacerlo más eficiente, CSS nos ofrece la propiedad abreviada font, que permite establecer varias características tipográficas en una sola declaración.

Sintaxis de la propiedad font

La propiedad font combina en una única línea las siguientes propiedades:

selector {
  font: font-style font-variant font-weight font-size/line-height font-family;
}

Esta sintaxis nos permite definir múltiples aspectos de la tipografía en una sola declaración, lo que hace nuestro código más conciso y mantenible.

Orden obligatorio de declaración

El orden de los valores en la propiedad font no es arbitrario y debe respetarse para que funcione correctamente:

p {
  font: italic small-caps bold 16px/1.5 Arial, sans-serif;
}

En este ejemplo:

• italic → font-style
• small-caps → font-variant
• bold → font-weight
• 16px → font-size
• 1.5 → line-height (opcional, pero si se incluye debe ir después de font-size con una barra)
• Arial, sans-serif → font-family (debe ser el último valor)

Es importante destacar que solo font-size y font-family son obligatorios. Los demás valores son opcionales, pero si se incluyen, deben aparecer en el orden correcto:

h1 {
  font: 24px "Helvetica Neue", Helvetica, sans-serif;
  /* Solo font-size y font-family */
}

Valores obligatorios y opcionales

Para que la propiedad font funcione correctamente:

• Valores obligatorios: font-size y font-family deben estar siempre presentes.
• Valores opcionales: font-style, font-variant, font-weight y line-height pueden omitirse.

Si omites un valor opcional, se aplicará su valor por defecto:

/* Declaración completa */
.completo {
  font: italic small-caps bold 18px/1.6 Georgia, serif;
}

/* Declaración parcial */
.parcial {
  font: bold 18px Georgia, serif;
  /* font-style y font-variant se establecen a "normal" */
}

Ejemplos prácticos

Veamos algunos ejemplos de uso de la propiedad font en diferentes contextos:

• Texto principal de contenido:

body {
  font: 16px/1.5 "Open Sans", Arial, sans-serif;
}

• Encabezado principal:

h1 {
  font: bold 32px/1.2 Montserrat, Helvetica, sans-serif;
}

• Texto destacado o cita:

blockquote {
  font: italic 18px/1.6 Georgia, "Times New Roman", serif;
}

• Texto técnico o código:

code {
  font: normal 14px/1.4 "Source Code Pro", Consolas, monospace;
}

• Texto de interfaz pequeño:

.small-ui-text {
  font: 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

Ventajas y desventajas

La propiedad abreviada font ofrece varias ventajas:

• Código más conciso: Reduce el número de líneas de código.
• Mayor legibilidad: Agrupa propiedades relacionadas.
• Mejor mantenimiento: Facilita cambios rápidos en la tipografía.

Sin embargo, también tiene algunas desventajas:

• Restablece valores no especificados: Cualquier propiedad de fuente que no incluyas se restablecerá a su valor predeterminado.
• Orden estricto: Requiere memorizar y respetar el orden correcto.
• Menor flexibilidad: No permite establecer algunas propiedades tipográficas más específicas.

/* Antes de usar font */
.elemento {
  font-style: italic;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5;
  font-family: Arial, sans-serif;
}

/* Después de usar font */
.elemento {
  font: italic bold 16px/1.5 Arial, sans-serif;
}

/* Pero cuidado: esto restablecerá font-variant a normal */

Casos especiales: valores de font-size y line-height

La combinación de font-size y line-height merece especial atención:

p {
  font: 16px/1.5 sans-serif;
}

En este ejemplo:

• 16px es el tamaño de fuente
• 1.5 es la altura de línea (equivalente a 1.5 veces el tamaño de fuente, es decir, 24px)

La altura de línea puede especificarse como un número sin unidades (recomendado), un valor con unidades, o un porcentaje:

/* Diferentes formas de especificar line-height */
.ejemplo1 {
  font: 16px/1.5 sans-serif;    /* Sin unidades (recomendado) */
}

.ejemplo2 {
  font: 16px/24px sans-serif;   /* Con unidades absolutas */
}

.ejemplo3 {
  font: 16px/150% sans-serif;   /* Con porcentaje */
}

Palabras clave para font-size

También podemos usar palabras clave predefinidas para el tamaño de fuente:

h1 {
  font: bold xx-large/1.2 "Playfair Display", serif;
}

small {
  font: x-small sans-serif;
}

Las palabras clave disponibles son: xx-small, x-small, small, medium, large, x-large y xx-large.

Valores globales y palabras clave del sistema

La propiedad font también acepta valores globales de CSS:

.reset {
  font: inherit; /* Hereda todos los valores de fuente del elemento padre */
}

Además, podemos usar palabras clave del sistema que hacen referencia a la configuración del sistema operativo del usuario:

body {
  font: 16px/1.5 system-ui, sans-serif;
}

Algunas palabras clave útiles son: system-ui, emoji, math, fangsong, entre otras.

Compatibilidad con propiedades específicas

Si necesitas un control más preciso sobre aspectos específicos de la tipografía, puedes combinar la propiedad font con propiedades individuales:

.elemento {
  /* Configuración base con shorthand */
  font: 16px/1.5 "Roboto", sans-serif;
  
  /* Propiedades específicas que no están en el shorthand */
  font-stretch: condensed;
  font-kerning: normal;
  font-feature-settings: "liga" 1;
}

Las propiedades específicas declaradas después del shorthand sobrescribirán los valores establecidos por font.

Uso con fuentes web (@font-face)

La propiedad font funciona perfectamente con fuentes web cargadas mediante @font-face:

@font-face {
  font-family: "Mi Fuente Personalizada";
  src: url("mifuente.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

h2 {
  font: bold 24px/1.3 "Mi Fuente Personalizada", Arial, sans-serif;
}

Buenas prácticas

Para aprovechar al máximo la propiedad font, considera estas recomendaciones:

• Usa el shorthand para estilos base: Establece los estilos tipográficos base con font y luego ajusta propiedades específicas si es necesario.

body {
  /* Estilo base para todo el documento */
  font: 16px/1.5 "Source Sans Pro", sans-serif;
}

h1 {
  /* Estilo específico para encabezados */
  font: bold 32px/1.2 "Playfair Display", serif;
}

• Mantén la coherencia: Usa un sistema tipográfico consistente en todo tu sitio.

:root {
  --font-primary: "Open Sans", sans-serif;
  --font-secondary: "Merriweather", serif;
  --font-size-base: 16px;
  --line-height-base: 1.5;
}

body {
  font: var(--font-size-base)/var(--line-height-base) var(--font-primary);
}

h1, h2, h3 {
  font: bold 2rem/1.2 var(--font-secondary);
}

• Ten cuidado con los valores predeterminados: Recuerda que las propiedades no especificadas se restablecerán a sus valores predeterminados.

/* Si antes habías establecido */
.elemento {
  font-variant: small-caps;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  font-family: Georgia, serif;
}

/* Y luego usas */
.elemento {
  font: 18px Georgia, serif;
}

/* font-variant volverá a "normal" y font-weight a "normal" */

Compatibilidad entre navegadores

La propiedad font tiene excelente soporte en todos los navegadores modernos. Sin embargo, algunas características tipográficas más avanzadas pueden tener soporte limitado en navegadores antiguos.

Para garantizar la compatibilidad, puedes utilizar un enfoque progresivo:

.elemento {
  /* Estilo base para todos los navegadores */
  font: 16px/1.5 Arial, sans-serif;
  
  /* Mejoras para navegadores modernos */
  font-feature-settings: "kern" 1, "liga" 1;
  font-variant-numeric: tabular-nums;
}

Con la propiedad abreviada font, puedes escribir código CSS más eficiente y mantenible, siempre que recuerdes el orden correcto de los valores y las limitaciones inherentes a esta sintaxis abreviada.