Usa las fuentes de tu marca en páginas del constructor.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

DXPR Builder no tiene ningún ajuste de fuente propio: el texto en páginas del constructor usa las fuentes de tu tema. Para cambiarlas, cargas una fuente web en el tema y apuntas el CSS del tema a ella. Al final, cada página del constructor muestra tu fuente de marca, en el editor y para las visitas. Si tu sitio usa DXPR Theme, elige fuentes en sus ajustes de tema.

Antes de empezar

  • Necesitas acceso a los archivos de tu tema; usa un tema personalizado o un subtema.
  • Comprueba que la licencia de la fuente permite su uso en un sitio web.
  • Los pasos usan la biblioteca global-styling y css/custom.css de CSS personalizado.

Configuración

  1. Añade la hoja de estilos de la fuente a la biblioteca en mytheme.libraries.yml. Para una fuente de Google:

    global-styling:
  css:
    theme:
      'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap': { type: external }
      css/custom.css: {}

  2. Fija la fuente en css/custom.css:

    body {
  font-family: 'Inter', sans-serif;
}

  3. Limpia cachés en Configuration > Development > Performance (/admin/config/development/performance).

  4. Abre una página en el constructor y mira un elemento Text.

Aloja la fuente por tu cuenta

Una fuente alojada por tu cuenta evita una petición a un tercero, lo que puede importar para las normas de privacidad.

  1. Descarga la fuente en formato WOFF2 y pon los archivos en la carpeta fonts/ del tema.

  2. Declara cada grosor en css/custom.css, sobre la regla del paso 2:

    @font-face {
  font-family: 'BrandFont';
  src: url('../fonts/brandfont.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

  3. Usa 'BrandFont' en tus reglas font-family, quita la línea de Google de la biblioteca y limpia cachés.

Lo que ves

El texto en cada elemento del constructor usa la fuente nueva, en modo de edición y en la página publicada. El panel Style de cada elemento aún fija tamaño y color; consulta Cambia el tamaño y el color del texto.

El botón Font family del editor de texto está desactivado por defecto. Enumera las fuentes seguras web estándar de CKEditor, no las tuyas, así que déjalo desactivado para mantener a quienes editan en la marca.

DXPR Theme

DXPR Theme tiene sus propios ajustes de fuente. Ve a Appearance, abre los ajustes de DXPR Theme (/admin/appearance/settings/dxpr_theme) y expande Fonts. Fija Base Font, Headings, Navigation, Site Name y Blockquote por separado, así que no necesitas CSS para ellos.

Si no ves la fuente

  • El texto aún muestra la fuente anterior. La biblioteca no está cargada, o la caché guarda el CSS viejo. Comprueba que mytheme.info.yml enumera la biblioteca, y limpia cachés en /admin/config/development/performance.
  • Los títulos o algunos recuadros conservan otra fuente. Una regla del tema para ese elemento es más específica que body. Inspecciona el texto en el navegador y añade su selector a tu regla.
  • Un párrafo muestra otra fuente. Una persona que edita le aplicó Font family. Selecciona el texto y haz clic en Remove format, y desmarca Font family en el perfil; consulta Editor de texto.

¿Qué sigue?