--- url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/personalizacion/fuentes-personalizadas' title: 'Usa las fuentes de tu marca en páginas del constructor | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:17:09+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: '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.' tags: - 'Match your brand' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Usa las fuentes de tu marca en páginas del constructor' description: '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.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:17:09+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/personalizacion/fuentes-personalizadas' articleSection: 'Adapta tu marca' - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/personalizacion/fuentes-personalizadas' description: '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.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Inicio item: 'https://dxpr.com/es' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: es --- [Centro de ayuda](/es/hc)/[Documentación](/es/hc/documentacion) /[Aprende DXPR Builder](/es/hc/documentation/learn-dxpr-builder) /[Gestionar el sitio](/es/hc/documentation/learn-dxpr-builder/manage) /[Adapta tu marca](/es/hc/documentation/learn-dxpr-builder/customization) # Usa las fuentes de tu marca en páginas del constructor. Aprende DXPR BuilderGestionar el sitioAdapta tu marca ## En esta guía Guías relacionadas - [Da estilo al contenido del constructor con el CSS de tu tema](/es/hc/documentacion/aprender-dxpr-builder/personalizacion/css-personalizado) - [Cambia el tamaño y el color del texto](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/tipografia) - [Bibliotecas de iconos](/es/hc/documentacion/aprender-dxpr-builder/personalizacion/bibliotecas-iconos) 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](/es/hc/documentacion/aprender-dxpr-builder/personalizacion/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: ```yaml 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`: ```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: ```css @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](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/tipografia). 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](/es/hc/documentacion/aprender-dxpr-builder/personalizacion/editor-texto#toolbar-buttons-per-role). ## ¿Qué sigue? - [CSS personalizado](/es/hc/documentacion/aprender-dxpr-builder/personalizacion/css-personalizado): la biblioteca y la hoja de estilos en que se basan estos pasos. - [Cambia el tamaño y el color del texto](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/tipografia): lo que fijan las personas que editan por elemento. - [Bibliotecas de iconos](/es/hc/documentacion/aprender-dxpr-builder/personalizacion/bibliotecas-iconos): las fuentes de iconos que trae DXPR Builder.