Selectores CSS

Los selectores CSS indican al navegador dónde se deben aplicar las fuentes web que va a utilizar, así como el grosor y el estilo de la fuente que se va a aplicar en el texto.

Usar nombres de font-family (familia de fuentes) en su CSS

En la página Proyectos web aparece el nombre de font-family en CSS, el valor numérico del grosor y el estilo de fuente de cada fuente del proyecto. Haga clic en el enlace “Editar proyecto“ para ver los detalles del CSS de cada proyecto.

Una vez que haya incluido el código incrustado en su documento, use estos nombres de font-family en el CSS para aplicar las fuentes al texto. Por ejemplo:

h1 {
  font-family: "brandon-grotesque", sans-serif;
}

Indicar fuentes alternativas

Si el navegador de un usuario no admite fuentes web o no se cargan por algún motivo, en su lugar se utilizarán fuentes alternativas en la pila de CSS.

La pila de fuentes deberá contener al menos una fuente alternativa que esté disponible de forma invariable en todas las plataformas (como Georgia o Arial), seguida de un nombre de font-family genérico (como serif o sans-serif). Si el navegador no puede encontrar la primera fuente, probará con la segunda y así sucesivamente.

Usar varios grosores y estilos

Puede indicar el grosor de las fuentes (font-weight) que no sean “normal“ ni “bold“ (negrita) si utiliza valores numéricos para font-weight en el CSS. Lo más común es que los valores numéricos se correspondan con los siguientes grosores:

  • 100 = thin (fina)
  • 200 = extra-light (extraclara)
  • 300 = light (clara)
  • 400 = normal (sin negrita), book
  • 500 = medium (media)
  • 600 = demi-bold (seminegrita)
  • 700 = bold (negrita)
  • 800 = heavy (oscura)
  • 900 = black (muy oscura)

Puede encontrar los valores numéricos de todas las fuentes de su proyecto en la página Proyectos web.

Por ejemplo, utilice este CSS para aplicar el grosor con valor 700 de una fuente al elemento h1:

h1 {
  font-weight: 700;
}

Uso de nombres específicos de variación en Internet Explorer 8

Internet Explorer 8 carga un máximo de cuatro grosores por familia y si se usan dos grosores de valores próximos (por ejemplo, 600 y 700), esto puede hacer que solo se cargue un grosor correctamente. Adobe Fonts facilita nombres de font-family específicos de variación para dichas versiones del navegador a fin de corregir estos desajustes.

El nombre específico de variación debe añadirse al comienzo de la pila de font-family según sea necesario, antes del nombre principal de la familia:

#post-title {
  font-family: "brandon-grotesque-n7","brandon-grotesque", sans-serif;
  font-style: normal;
  font-weight: 700;
}

Los nombres están formados por el nombre de font-family normal, seguido de un guion y después de la descripción de la variación de fuente (o FVD, según las siglas en inglés). Por ejemplo, el nombre específico de variación de brandon-grotesque que contiene la fuente con grosor 700 sería brandon-grotesque-n7.

El nombre específico de variación no vendrá definido en los navegadores que no tengan estos errores, por lo que se usará el nombre completo de la familia que aparezca en segundo lugar en la pila.

La mayoría de los usuarios no tendrán que utilizar estos nombres adicionales de font-family. Solo deberá añadirlos si surgen problemas concretamente con fuentes que se ven correctamente en Internet Explorer 8.

Logotipo de Adobe

Inicia sesión en tu cuenta