Personalizar el funcionamiento de las fuentes web con los ajustes de font-display

Descubra cómo utilizar los ajustes de font-display para modificar el funcionamiento de las fuentes web.

Los parámetros de font-display (visualización de fuentes) le permiten especificar cómo se cargan las fuentes web en el navegador web y cómo se aplican en su sitio web. Hay cinco opciones de font-display:

Valor de font-display 

Acción resultante 

auto (automático)

Permite al explorador usar su método predeterminado para cargar la fuente.

block (bloqueo)

Oculta el texto en su sitio web hasta que se descargue la fuente web. Los que visiten su sitio web podrán ver un parpadeo de texto invisible o FOIT con esta opción.

swap (intercambio)

Muestra la fuente alternativa que haya indicado en el CSS hasta que se descargue la fuente web. Los que visiten su sitio web podrán ver un parpadeo de texto sin estilo o FOUT con esta opción.  

fallback (alternativa)

Ejecuta la acción resultante del valor block durante un breve período, luego pasa a la acción de swap y finalmente aplica la fuente alternativa al texto. Si las fuentes web no se han cargado al terminar de ejecutarse el valor swap, la fuente alternativa seguirá aplicándose. 

optional (opcional)

Ejecuta la acción resultante de block durante un breve período y luego aplica la fuente alternativa al texto. El valor le da al navegador web la opción de no descargar la fuente web, por ejemplo, si el visitante del sitio web tiene una conexión lenta a Internet. 

Para obtener detalles técnicos sobre la propiedad font-display y los valores admitidos, consulte la Especificación de nivel 4 del módulo de fuentes CSS.

Nota:

De forma predeterminada, los proyectos de fuentes web se crean mediante la propiedad font-display con el valor auto.

Para personalizar los parámetros de font-display, realice los siguientes pasos:

  1. En su página de proyectos web, haga clic en  Editar proyecto.

    Editar proyecto
    Editar proyecto

  2. Seleccione cualquiera de los siguientes valores de font-display en la barra lateral. De forma predeterminada, la propiedad font-display de los proyectos de fuentes web tiene activada la opción auto.  

    parámetros de font-display

  3. Haga clic en Guardar cambios y el valor de font-display se aplicará a su sitio web en cuestión de minutos.

El nuevo parámetro de font-display se incluye automáticamente en su sitio web dentro del código incrustado existente.

Modificar proyectos web existentes

La compatibilidad con font-display se añadió al sistema de carga de fuentes web de Adobe en septiembre de 2020. Los proyectos web creados antes de septiembre de 2020 se han modificado para que se aplique de manera predeterminada la acción de font-display: auto 

El parámetro de font-display de cualquier proyecto existente se puede cambiar siguiendo los pasos anteriores. Una vez guardados los cambios, el nuevo parámetro de font-display se incluirá en su sitio web dentro del código incrustado existente. No es necesario realizar cambios en el sitio web en sí. 

Logotipo de Adobe

Inicia sesión en tu cuenta