Ir para o conteúdo

Configurar o Google Fonts para Uso em App Builder

Este guia mostrará como usar o Google Fonts em an App Builder aplicação. Se você estiver procurando especificar pesos diferentes para as Google Fonts que seu aplicativo usará, pode haver configuração adicional necessária para atingir o resultado desejado. Para aproveitar diferentes pesos de Google Fonts de App Builder você precisa atualizar o código de importação para incluir um "0" antes de cada peso especificado na sintaxe da API do Google ao configurar os Parâmetros do Widget do Site.

Há duas áreas principais que precisam ser configuradas, a primeira envolve a configuração de um Site Widget. Depois que isso for configurado, você precisará modificar o Tema do seu aplicativo para aproveitar a fonte selecionada por meio da UI/UX da Camada de Aplicativo.

Configurar um Widget de Site para Se Conectar ao Google Fonts

  1. Navegue até IDE > Configurações adicionais
  2. Clique em Widgets do site
  3. Clique em + Registro de widget em Widgets do site
  4. Clique no menu suspenso da coluna Widget e selecione Web Font Loader
  5. Clique no ícone marca de seleção para salvar
  6. Clique em + Parâmetro em Parâmetros do widget do site
  7. Selecione WebFontName como o valor do parâmetro

  8. Insira as informações da API do Google Font para a fonte do Google nomeada que você deseja usar no campo Valor. Esta etapa é onde você modifica a sintaxe da API do Google fornecida para incluir um 0, antes dos pesos especificados. Por exemplo:

    • Sintaxe do Google Font: Lato:wght@100;300;400;700&display=swap"
    • Sintaxe modificada para entrar no campo Valor: Lato:wght@0,100;300;400;700&display=swap"

  9. Clique em Salvar sitewidget.png

Exemplo de widget Web Font Loader para especificar Google Font

Modifique Seu Tema para Especificar o Valor da Fonte

  1. Navegue até App Workbench > Look & Feel
  2. Localize a coleção de temas do seu aplicativo e clique no Tema do aplicativo correspondente
  3. Clique no ícone Abrir registro do tema para expandir as informações do tema
  4. Selecione o componente Página e clique em + Estilo em Estilos
  5. Selecione o contêiner Página como a área
  6. Selecione Fonte como o tipo de estilo
  7. Selecione Todos os estados como o estado
  8. Especifique as informações da família de fontes Valor 1 para fornecer informações sobre a fonte do Google que você deseja usar. Por exemplo: Lato, sans-serif
  9. Insira uma descrição de Ajuda técnica
  10. Clique em + Estilo em Estilos
  11. Selecione o Container Site como a Área
  12. Selecione Fonte como o Tipo de estilo
  13. Especifique a Família de fontes Valor 1 para corresponder à etapa 8. Por exemplo: Lato, sans-serif
  14. Clique em Salvar

fontstyles.png

Exemplo de estilos configurados para especificar o tipo de fonte do Google

Após concluir as etapas descritas acima, verifique se seu tema está associado ao seu aplicativo. Supondo que esteja, agora você pode navegar para visualizar seu aplicativo, atualizar o navegador da web e ver a nova fonte.

Recursos Adicionais