Como usar fontes personalizadas em formulários de registro
O que você vai aprender
Saiba como criar seus formulários de registro com fontes personalizadas para que seus clientes tenham uma experiência de forte identidade de marca e consistência com o restante do seu site.
Criar um formulário de registro com um design bonito é essencial para convencer os visitantes a cumprir o objetivo do seu formulário. Se a sua marca usa fontes que não estão disponíveis nativamente no editor de formulário de registro, adicionar essas fontes personalizadas é uma forma fácil de deixar seus formulários com um visual coeso em relação ao restante do seu site. Depois de adicionar suas fontes, você pode usar sua fonte para personalizar seus formulários de registro como achar melhor.
Termos-chave
- Fonte personalizada
Qualquer fonte que não é fornecida por padrão no editor da Klaviyo. Isso inclui:- Fontes Google
- Fontes Adobe
- Fontes importadas
- Fonte segura para a web
Fonte armazenada localmente na maioria dos dispositivos, ou seja, que não precisa ser carregada de uma origem externa para ser exibida. - Fonte alternativa
Uma fonte segura para a web que é usada se uma página não conseguir carregar a fonte principal.
Como adicionar fontes personalizadas à sua conta
No menu principal à esquerda, acesse Conteúdo > Imagens e marca. Em seguida, clique na aba Fontes. Você pode adicionar uma fonte do Google, uma fonte da Adobe ou uma fonte importada.
Se você adicionar uma fonte personalizada ao Klaviyo que já está em uso no seu site, faça upload do estilo exato da fonte (por exemplo, light, bold ou italic) e do peso (por exemplo, 400) que seu site usa atualmente. Se você fizer upload de uma fonte e selecionar um estilo ou peso que seja ligeiramente diferente, os estilos selecionados no Klaviyo podem substituir alguns dos estilos de fonte existentes do seu site.
Adicionar uma fonte do Google
Para adicionar uma fonte do Google:
- Selecione o menu suspenso Nome da fonte para ver uma lista de todas as fontes do Google disponíveis, exceto as fontes que você já carregou na sua conta.
- Escolha a fonte desejada. Ao selecionar, você verá uma prévia da fonte abaixo do menu suspenso, assim como o número de variantes possíveis (por exemplo, negrito, itálico etc.).
- Se você quiser adicionar mais de 1 variante, clique na seta ao lado do número de variantes possíveis e escolha as fontes que você quer adicionar.
- Selecione uma Fonte alternativa.
- Clique em Adicionar fonte. A fonte que você adicionou agora aparecerá na seção Your Fonts, na parte inferior da página.
Na seção Suas fontes , você poderá ver as fontes que adicionou à sua conta. Para editar ou excluir qualquer uma das suas fontes nesta seção, selecione os três pontos na fonte.
Se você optar por usar fontes do Google, para fins de GDPR, observe que o Google Fonts é hospedado pelo Google. Ao incluir uma fonte do Google na sua biblioteca de fontes, você está usando o Google Fonts. A Klaviyo tem uma seleção de fontes personalizadas que usamos em nossos modelos de formulário de registro disponíveis para você importar e usar facilmente. Ver a lista de fontes hospedadas na Klaviyo.
Adicionar uma fonte da Adobe
Você precisa ter uma conta do Adobe para usar as fontes do Adobe.
Para adicionar uma fonte da Adobe:
- Navegue até o Adobe Fonts.
- Procure o link da sua fonte Adobe e selecione sua fonte.
- Ao lado do nome da sua fonte, clique no ícone de código.
- Se necessário, insira um novo nome de projeto e clique em Salvar.
- Na próxima janela modal, copie o URL https://use.typekit.net da fonte que você quer adicionar. Não inclua o .css como parte do URL ao copiá-lo.
- Volte para a Klaviyo e cole o URL no campo Endereço CSS.
- Selecione Continuar e escolha uma Fonte de fallback para a fonte que você quer fazer upload. Observe que, se uma fonte já estiver disponível na sua conta, uma marca de verificação verde aparecerá ao lado da fonte e a fonte de fallback existente será exibida.
- Selecione Adicionar fonte.
Depois de adicionar sua fonte, ela será listada na seção Your Fonts na parte inferior da página. Para editar qualquer uma das suas fontes nesta seção, selecione os três pontos na fonte.
Adicionar uma fonte importada
Se você comprou ou baixou uma fonte personalizada que não é hospedada por uma fonte de terceiros, ainda assim pode usá-la em um formulário da Klaviyo. Primeiro, hospede os arquivos de fonte em um local que ficará acessível ao Klaviyo (por exemplo, nos recursos do seu site ou em uma plataforma de hospedagem de fontes). Habilite o CORS (compartilhamento de recursos entre origens) definindo o Access-Control-Allow-Origin header como *, para que a fonte possa ser acessada pelos dispositivos dos destinatários.
Para adicionar uma fonte importada:
- Dê um nome à sua fonte.
- Especifique a espessura, o estilo e um URL de origem da fonte. O URL de origem deve ser um URL válido que termine em WOFF, WOFF2, TTF, EOT ou SVG.
- Opcional: para adicionar variantes adicionais, selecione Adicionar variante de fonte e repita a etapa 2 para essa variante.
- Selecione Adicionar fonte para adicionar essa fonte à seção Suas fontes .
Em Suas fontes, você poderá ver as fontes que importou para a sua conta. Você também pode excluir ou editar suas fontes selecionando os 3 pontos na fonte.
Editar fonte
Para editar uma fonte personalizada existente:
- Navegue até Content > Images & brand > Fonts.
- Localize a fonte que deseja editar na seção Your Fonts, na parte inferior da página.
- No card dessa fonte, clique nos 3 pontos no canto superior.
- Selecione Edit. Depois, faça o seguinte:
- Edite a fonte substituta de 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.
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.
- Quando você terminar de editar sua fonte, selecione Atualizar fonte.
Como excluir uma fonte
Para excluir uma fonte:
- Navegue até a seção Suas fontes .
- Na fonte que você gostaria de excluir, clique nos 3 pontos e escolha Excluir. Se você optar por excluir sua fonte, um modal será exibido notificando que, se sua fonte for usada em algum formulário, sua fonte de fallback será exibida depois que você excluir a fonte adicionada.
- Selecione Excluir.
Depois que uma fonte personalizada é excluída, todos os formulários na Klaviyo que estiverem usando essa fonte personalizada no momento voltarão imediatamente para a fonte alternativa. Se você adicionar a fonte novamente, esses formulários voltarão a usá-la.
Como usar fontes personalizadas no gerador de formulário de registro
Para usar sua fonte personalizada em um formulário de registro, basta editar o texto na prévia do formulário:
- Vá até a aba Formulários de registro.
- Encontre o formulário que você quer editar e clique nos 3 pontos ao lado dele e, em seguida, selecione Editar formulário.
- Na visualização do formulário, selecione o texto que você gostaria de editar.
- No menu Texto à direita, destaque o texto.
- Use a lista suspensa de fontes na parte superior para selecionar sua fonte personalizada. Observe que as fontes da seção Suas fontes da sua conta aparecerão no topo da lista.
Durante a edição, sua fonte personalizada aparecerá no canvas (por exemplo, na visualização da edição), mas não no painel do lado esquerdo. O painel do lado esquerdo exibirá a fonte alternativa em vez da fonte personalizada.
- Quando você estiver satisfeito com suas alterações, clique em Publicar para colocá-las no ar.
Fonte do site alterada pelo Klaviyo.js
Klaviyo rastreamento com atividade no site (Klaviyo.js), deve ser instalado manualmente ou pelas integrações de e-commerce para publicar o formulário de registro da Klaviyo no seu site. Se você tiver carregado apenas algumas variantes de fontes, o Klaviyo.js carrega as variantes restantes na sua biblioteca quando é injetado no seu site. Por isso, as fontes do seu site podem ser levemente editadas nesse processo, como uma mudança no peso do cabeçalho do site.
Há duas opções para resolver alterações causadas pelo Klaviyo.js. Você pode:
- Excluir as fontes relevantes da biblioteca de fontes da Klaviyo.
- Atualize o CSS no cabeçalho do seu site para que ele não seja substituído quando o Klaviyo.js carregar as variantes adicionais.
Essa opção exige um conhecimento avançado de CSS; você pode precisar da ajuda técnica. A Klaviyo não oferece suporte para ajustar o CSS do seu site, mas temos uma ampla rede de parceiros.
Recursos adicionais
- Como hospedar uma fonte personalizada no seu site
Saiba como fazer upload e importar uma fonte que não esteja hospedada no Google ou na Adobe para usar nos formulários de registro da Klaviyo na sua loja. Há duas formas de usar uma fonte importada em formulários de registro:
- Criando uma estratégia de aquisição eficaz usando formulários de registro