Como usar fontes personalizadas em formulários de inscrição

Estimado 10 minuto de leitura
|
Atualizado 29 de ago. de 2024, 16:58 EST
O que você vai aprender

O que você vai aprender

Saiba como projetar seus formulários de inscrição com fontes personalizadas para que seus clientes tenham uma forte identidade de marca e consistência com o restante do seu site.

A criação de um formulário de registro bem projetado é fundamental para motivá-los a cumprir a meta do seu formulário. Se sua marca usa fontes que não estão disponíveis nativamente no editor de formulários de registro, adicionar essas fontes personalizadas é uma maneira fácil de fazer com que seus formulários pareçam coesos com o restante do site. Depois de adicionar as fontes, o senhor pode usá-las para personalizar o formulário de registro como achar melhor.

Termos-chave

Termos-chave

  • Fonte personalizada
    Qualquer fonte que não seja fornecida por padrão no editor do Klaviyo. Isso inclui:
    • Fontes Google
    • Fontes Adobe
    • Fontes importadas
  • Fonte segura para a Web
    Uma fonte que é armazenada localmente na maioria dos dispositivos e, portanto, não precisa ser carregada de uma fonte externa para ser exibida.
  • Fonte de reserva
    Uma fonte segura para a Web que é usada se uma página não puder carregar a fonte principal.
Adicionar fontes personalizadas à sua conta

Adicionar fontes personalizadas à sua conta

No menu principal do lado esquerdo, navegue até Content > Images & Brand. A partir daí, clique na guia Fonts (Fontes ). O senhor pode adicionar uma fonte do Google, da Adobe ou importada.

Se adicionar ao Klaviyo uma fonte personalizada que já esteja em uso em seu site, carregue o estilo exato da fonte (por exemplo, light, negrito ou itálico) e o peso (por exemplo, 400) que seu site usa atualmente. Se o senhor carregar uma fonte e selecionar um estilo ou peso ligeiramente diferente, os estilos selecionados no Klaviyo poderão substituir alguns dos estilos de fonte existentes no site.

O menu Fonts (Fontes) da guia Images and Brand (Imagens e marcas) no Klaviyo, onde o senhor pode adicionar uma nova fonte do Google, da Adobe ou importada.

Adicionar uma fonte do Google

Adicionar uma fonte do Google

Para adicionar uma fonte do Google:

  1. Selecione o menu suspenso Font name (Nome da fonte ) para ver uma lista de todas as fontes do Google disponíveis, exceto as fontes que o senhor já carregou em sua conta.
  2. Escolha a fonte desejada. Ao selecionar, o senhor verá uma visualização da fonte abaixo do menu suspenso, bem como o número de variantes possíveis (por exemplo, negrito, itálico etc.).
    • Se quiser adicionar mais de uma variante, clique na seta ao lado do número de variantes possíveis e escolha as fontes que deseja adicionar.
  3. Selecione uma fonte Fallback.
  4. Clique em Add font (Adicionar fonte). A fonte adicionada será exibida na seção Your Fonts (Suas fontes ), na parte inferior da página.

 

Na seção Your Fonts (Suas fontes ), você poderá ver as fontes que adicionou à sua conta. Para editar ou excluir qualquer uma de suas fontes nesta seção, selecione os três pontos na fonte.

A seção Your Fonts (Suas fontes) da guia Images and Brand (Imagens e marca) mostra o menu de 3 pontos selecionado em uma fonte de exemplo.

Se o senhor optar por usar as fontes do Google, para fins de GDPR, observe que as fontes do Google são hospedadas pelo Google. Ao incluir uma fonte do Google na sua biblioteca de fontes, o senhor está usando a fonte do Google. A Klaviyo tem uma seleção de fontes personalizadas que usamos em nossos modelos de formulário de inscrição e que o senhor pode importar e usar facilmente. Veja a lista de fontes hospedadas pelo Klavio.

Adicionar uma fonte da Adobe

Adicionar uma fonte da Adobe

Para adicionar uma Adobe Font:

  1. Navegue até Adobe Fonts.
  2. Procure o link da fonte da Adobe e selecione a fonte.
  3. Ao lado do nome da fonte, clique no ícone de código.
  4. Se necessário, digite um novo nome de projeto e clique em Salvar.
  5. No próximo modal, copie o URL https://use.typekit.net da fonte que o senhor deseja adicionar. Não inclua o arquivo .css como parte do URL quando o senhor o copia.
  6. Navegue de volta para o Klaviyo e cole o URL no campo CSS Address (Endereço do CSS ).
  7. Selecione Continue e, em seguida, escolha uma fonte Fallback para a fonte que o senhor deseja carregar. Observe que, se uma fonte já estiver disponível em sua conta, uma marca de seleção verde será exibida ao lado da fonte e a fonte de reserva existente será exibida.
  8. Selecione Add font (Adicionar fonte).

Depois de adicionar a fonte, ela será listada na seção Your Fonts (Suas fontes ), na parte inferior da página. Para editar qualquer uma de suas fontes nessa seção, selecione os três pontos na fonte.

A seção Your Fonts (Suas fontes) da guia Images and Brand (Imagens e marca) em um exemplo de conta da Klaviyo mostra o menu de 3 pontos selecionado em uma das fontes.

Adição de uma fonte importada

Adição de uma fonte importada

Se o senhor tiver comprado ou baixado uma fonte personalizada que não esteja hospedada em uma fonte de terceiros, ainda poderá usá-la em um formulário do Klaviyo. Primeiro, hospede os arquivos de fontes em um local que possa ser acessado pelo Klaviyo (por exemplo, nos ativos do seu site ou em uma plataforma de hospedagem de fontes). Certifique-se de ativar o CORS (Cross-Origin Resource Sharing, Compartilhamento de recursos entre origens) definindo o cabeçalho Access-Control-Allow-Origin como *, para que a fonte possa ser acessada pelos dispositivos dos destinatários.

Para adicionar uma fonte importada:

  1. Dê um nome à sua fonte.
  2. Especifique um peso de fonte, um estilo e um URL de origem. O URL de origem deve ser um URL válido que termine em WOFF, WOFF2, TTF, EOT ou SVG.
  3. Opcional: Para adicionar outras variantes, selecione Add font variant (Adicionar variante de fonte) e repita a etapa 2 para essa variante.
  4. Selecione Add Font (Adicionar fonte ) para adicionar essa fonte à seção Your Fonts (Suas fontes ).

Em Your Fonts (Suas fontes), o senhor poderá ver as fontes que importou para sua conta. O senhor também pode excluir ou editar suas fontes selecionando os três pontos na fonte.

A seção Your Fonts (Suas fontes) da guia Images and Brand (Imagens e marca) em um exemplo de conta da Klaviyo mostra o menu de 3 pontos selecionado em uma das fontes.

Editar uma fonte

Editar uma fonte

Para editar uma fonte personalizada existente:

  1. Navegue até Content > Images & brand > Fonts.
  2. Localize a fonte que deseja editar na seção Your Fonts, na parte inferior da página.
  3. No cartão dessa fonte, clique nos três pontos no canto superior.
  4. Selecione Edit. Depois, faça o seguinte:
    • Edite a fonte de reserva para qualquer fonte personalizada. 
    • No caso de fontes hospedadas pelo Google e Klaviyo, edite ou adicione às variantes selecionadas selecionando # of font variants para expandir a lista e, em seguida, selecionando as fontes que deseja adicionar.
      O menu Edit Font na Klaviyo mostra variantes de fontes adicionais selecionadas para adicionar à Google Font existente em uma conta.

      Você não pode adicionar variantes às fontes da Adobe depois de carregá-las, pois as variantes são incorporadas ao seu link do Typekit. Para adicionar variantes a uma fonte Adobe, você deve excluir a fonte existente e adicioná-la novamente usando um link diferente do Typekit que tenha todas as variantes que deseja incluir.

  5. Quando terminar de editar a fonte, selecione atualizar fonte.
Excluir uma fonte

Excluir uma fonte

Para excluir uma fonte:

  1. Navegue até a seção Your Fonts (Suas fontes ).
  2. Na fonte que deseja excluir, clique nos três pontos e selecione Excluir. Se o senhor optar por excluir a fonte, será exibido um modal notificando-o de que, se a fonte for usada em qualquer formulário, a fonte de reserva será exibida depois que o senhor excluir a fonte adicionada.
    O modal de confirmação Delete Font que aparece quando o senhor opta por excluir uma fonte.
  3. Selecione Excluir.

Quando uma fonte personalizada for excluída, todos os formulários do Klaviyo que estiverem usando a fonte personalizada serão imediatamente revertidos para a fonte alternativa. Se o senhor adicionar novamente a fonte, esses formulários começarão a usá-la novamente. 

Uso de fontes personalizadas no construtor de formulários de registro

Uso de fontes personalizadas no construtor de formulários de registro

Para usar sua fonte personalizada em um formulário de registro, basta editar o texto na visualização do formulário:

  1. Navegue até a guia Formulário de registro.
  2. Localize o formulário que deseja editar, clique nos três pontos ao lado dele e selecione Edit form (Editar formulário).
  3. Na visualização do formulário, selecione o texto que deseja editar. 
  4. No menu Text (Texto) à direita, destaque o texto.
  5. Use o menu suspenso de fontes na parte superior para selecionar sua fonte personalizada. Observe que as fontes da seção Your Fonts (Suas fontes ) da sua conta aparecerão no topo da lista. 

    Durante a edição, sua fonte personalizada aparecerá na tela (por exemplo, na visualização da edição), mas não no painel do lado esquerdo. O painel do lado esquerdo exibirá sua fonte de reserva em vez da fonte personalizada.

  6. Quando o senhor estiver satisfeito com as alterações, clique em Publish (Publicar ) para torná-las efetivas.

 

Fonte do site afetada pelo Klaviyo.js

Fonte do site afetada pelo Klaviyo.js

Klaviyo active On site tracking (Klaviyo.js), deve ser instalado manualmente ou por meio de sua integração de comércio eletrônico para publicar os formulários de inscrição do Klaviyo em seu site. Se o senhor tiver carregado apenas algumas variações de fontes, o Klaviyo.js carregará as variações restantes na sua biblioteca quando for injetado no site. Por isso, as fontes do seu site podem ser ligeiramente editadas nesse processo, como, por exemplo, uma alteração no peso do cabeçalho do site. 

Há duas opções para resolver quaisquer alterações feitas em suas fontes pelo Klaviyo.js. O senhor pode:

  • Exclua as fontes relevantes da biblioteca de fontes do Klaviyo. 
  • Atualize o CSS no cabeçalho do seu site para que ele não seja substituído quando o Klaviyo.js carregar as variações adicionais. 

    Como essa opção exige um conhecimento profundo de CSS, o senhor pode precisar da ajuda de um desenvolvedor. A Klaviyo não pode oferecer assistência para ajustar o CSS do seu site, mas temos uma vasta rede de parceiros.

Recursos adicionais 

Recursos adicionais 

Esse artigo foi útil?
Use esse formulário somente para fazer comentários sobre artigos. Saiba como entrar em contato com o suporte.

Saiba mais sobre a Klaviyo

Comunidade
Conecte-se com colegas, parceiros e especialistas da Klaviyo para encontrar inspiração, compartilhar percepções e obter respostas para todas as suas perguntas.
Treinamentos ao vivo
Participe de uma sessão ao vivo com especialistas da Klaviyo para aprender sobre as práticas recomendadas, como configurar os principais recursos e muito mais.
Suporte

Acesse o suporte por meio da sua conta.

Suporte por e-mail (teste gratuito e contas pagas) Disponível 24 horas

Chat/assistência virtual
A disponibilidade varia conforme o local e o tipo de plano