- Guía del usuario de Adobe Fonts
- Introducción
- Licencias de fuentes
- Licencias de fuentes
- Administrar la cuenta
- Licencias para clientes de Creative Cloud para empresas
- Añadir licencias de fuentes a la cuenta
- Eliminación de fuentes de la biblioteca de suscripción
- Adobe Fonts no está disponible para Adobe ID registrados en China
- ¿Por qué no se incluyen estas fuentes con mi suscripción a Creative Cloud?
- Retirada de fuentes de Morisawa en septiembre de 2021
- Obtener y usar fuentes
- Uso de Adobe Fonts en las aplicaciones de Creative Cloud
- Administrar las fuentes
- Resolver problemas por fuentes no disponibles en las aplicaciones de escritorio
- Uso de fuentes en InDesign
- Fuentes y tipografía
- Uso de fuentes web en documentos HTML5 Canvas
- Uso de fuentes en InCopy
- Uso de fuentes web en Muse
- Empaquetar archivos de fuentes
- Guía de solución de problemas: añadir fuentes
- Las fuentes añadidas no aparecen en el menú de fuentes
- “No es posible añadir una o más fuentes” o “Fuente con mismo nombre ya instalada”
- ¿Qué sucede cuando la fuente que estoy utilizando la modifica el creador o empresa tipográfica?
- Diseño y desarrollo web
- Añadir fuentes al sitio web
- Guía de solución de problemas: Añadir fuentes a un sitio web
- Solución de problemas de fuentes
- Uso de fuentes web en correos electrónicos HTML o newsletters
- Uso de fuentes web con Accelerated Mobile Pages (AMP)
- Selectores CSS
- Personalizar el funcionamiento de las fuentes web con los ajustes de font-display
- Códigos incrustados
- Subconjuntos dinámicos y alojamiento de fuentes web
- Eventos de fuentes
- ¿Por qué mis fuentes web proceden de use.typekit.net?
- El sitio no puede conectarse a use.typekit.net
- Uso de fuentes web con CodePen
- Compatibilidad con navegadores y sistemas operativos
- Dominios
- Uso de fuentes web al desarrollar de forma local
- Política de seguridad de contenido
- Impresión de fuentes web
- Compatibilidad con idiomas y funciones OpenType
- Tecnología de fuentes
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.
