Utilizar os tipos de letra da marca nas páginas do construtor.

Aprender DXPR BuilderGerir o siteAdaptar à sua marca

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.

Configuração

  1. Adicione a folha de estilos do tipo de letra à biblioteca em mytheme.libraries.yml. Para um tipo Google:

    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:

    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:

    @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.

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.

O que se segue?