--- url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/personalizacao/tipos-de-letra-personalizados' title: 'Utilizar os tipos de letra da marca nas páginas do construtor | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:46:34+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'O DXPR Builder não tem definição própria de tipo de letra: o texto nas páginas do construtor usa os tipos de letra do tema. Para os mudar, carregue um tipo de letra Web no tema e aponte o CSS do tema para ele. No fim, cada página do construtor mostra o tipo de letra da marca, no editor e para os visitantes. Se o site usa o DXPR Theme, escolha antes os tipos de letra nas definições do 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: 'Utilizar os tipos de letra da marca nas páginas do construtor' description: 'O DXPR Builder não tem definição própria de tipo de letra: o texto nas páginas do construtor usa os tipos de letra do tema. Para os mudar, carregue um tipo de letra Web no tema e aponte o CSS do tema para ele. No fim, cada página do construtor mostra o tipo de letra da marca, no editor e para os visitantes. Se o site usa o DXPR Theme, escolha antes os tipos de letra nas definições do 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:46:34+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/pt-pt/hc/documentacao/aprender-dxpr-builder/personalizacao/tipos-de-letra-personalizados' articleSection: 'Adaptar à sua marca' - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/personalizacao/tipos-de-letra-personalizados' description: 'O DXPR Builder não tem definição própria de tipo de letra: o texto nas páginas do construtor usa os tipos de letra do tema. Para os mudar, carregue um tipo de letra Web no tema e aponte o CSS do tema para ele. No fim, cada página do construtor mostra o tipo de letra da marca, no editor e para os visitantes. Se o site usa o DXPR Theme, escolha antes os tipos de letra nas definições do tema.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Início item: 'https://dxpr.com/pt-pt' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pt-pt --- [Centro de ajuda](/pt-pt/node/75)/[Documentação](/pt-pt/hc/documentacao) /[Aprender DXPR Builder](/pt-pt/hc/documentation/learn-dxpr-builder) /[Gerir o site](/pt-pt/hc/documentation/learn-dxpr-builder/manage) /[Adaptar à sua marca](/pt-pt/hc/documentation/learn-dxpr-builder/customization) # Utilizar os tipos de letra da marca nas páginas do construtor. Aprender DXPR BuilderGerir o siteAdaptar à sua marca ## Neste guia Guias relacionados - [Estilizar conteúdo do construtor com o CSS do tema](/pt-pt/hc/documentacao/aprender-dxpr-builder/personalizacao/css-personalizado) - [Altere o tamanho e a cor do texto](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/tipografia) - [Bibliotecas de ícones](/pt-pt/hc/documentacao/aprender-dxpr-builder/personalizacao/bibliotecas-de-icones) O DXPR Builder não tem definição própria de tipo de letra: o texto nas páginas do construtor usa os tipos de letra do tema. Para os mudar, carregue um tipo de letra Web no tema e aponte o CSS do tema para ele. No fim, cada página do construtor mostra o tipo de letra da marca, no editor e para os visitantes. Se o site usa o DXPR Theme, escolha antes os tipos de letra nas definições do tema. ## Antes de começar - Precisa de acesso aos ficheiros do tema; use um tema personalizado ou um subtema. - Verifique que a licença do tipo de letra permite uso num site. - Os passos usam a biblioteca `global-styling` e `css/custom.css` de [CSS personalizado](/pt-pt/hc/documentacao/aprender-dxpr-builder/personalizacao/css-personalizado). ## Configuração 1. Adicione a folha de estilos do tipo de letra à biblioteca em `mytheme.libraries.yml`. Para um tipo 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. Defina o tipo de letra em `css/custom.css`: ```css body { font-family: 'Inter', sans-serif; } ``` 3. Limpe as caches em **Configuration** > **Development** > **Performance** (`/admin/config/development/performance`). 4. Abra uma página no construtor e veja um elemento **Text**. ## Alojar o tipo de letra Um tipo de letra alojado evita um pedido a terceiros, o que pode importar para regras de privacidade. 1. Descarregue o tipo de letra em formato WOFF2 e coloque os ficheiros na pasta `fonts/` do tema. 2. Declare cada peso em `css/custom.css`, acima da regra do passo 2: ```css @font-face { font-family: 'BrandFont'; src: url('../fonts/brandfont.woff2') format('woff2'); font-weight: 400; font-display: swap; } ``` 3. Use `'BrandFont'` nas regras `font-family`, remova a linha Google da biblioteca e limpe as caches. ## O que vê O texto em cada elemento do construtor usa o novo tipo de letra, no modo de edição e na página publicada. O painel **Style** de cada elemento continua a definir tamanho e cor; consulte [Mudar o tamanho e a cor do texto](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/tipografia). O botão **Font family** do editor de texto vem desligado por predefinição. Enumera os tipos de letra padrão do CKEditor para a Web, não os seus, por isso mantenha-o desligado para manter os editores na marca. ## DXPR Theme O DXPR Theme tem definições próprias de tipos de letra. Aceda a **Appearance**, abra as definições do DXPR Theme (`/admin/appearance/settings/dxpr_theme`) e expanda **Fonts**. Define **Base Font**, **Headings**, **Navigation**, **Site Name** e **Blockquote** em separado, por isso não precisa de CSS para eles. ## Se o tipo de letra não aparece - **The text still shows the old font.** A biblioteca não está carregada, ou a cache guarda o CSS antigo. Verifique que `mytheme.info.yml` enumera a biblioteca e limpe as caches em `/admin/config/development/performance`. - **Headings or some boxes keep another font.** Uma regra do tema para esse elemento é mais específica do que `body`. Inspecione o texto no navegador e adicione o seletor à regra. - **One paragraph shows a different font.** Um editor aplicou-lhe **Font family**. Selecione o texto e clique em **Remove format** e desmarque **Font family** no perfil; consulte [Editor de texto](/pt-pt/hc/documentacao/aprender-dxpr-builder/personalizacao/editor-de-texto#toolbar-buttons-per-role). ## O que se segue? - [CSS personalizado](/pt-pt/hc/documentacao/aprender-dxpr-builder/personalizacao/css-personalizado): a biblioteca e a folha de estilos em que estes passos assentam. - [Mudar o tamanho e a cor do texto](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/tipografia): o que os editores definem por elemento. - [Bibliotecas de ícones](/pt-pt/hc/documentacao/aprender-dxpr-builder/personalizacao/bibliotecas-de-icones): os tipos de letra de ícones que vêm com o DXPR Builder.