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.
Se a sua marca usa fontes que não estão disponíveis no editor de formulário de registro, adicione-as à sua biblioteca de fontes da Klaviyo antes de aplicá-las aos seus formulários. Você pode adicionar fontes do Google Fonts, fontes da Adobe ou arquivos de fonte importados.
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
Você pode adicionar fontes do Google Fonts, do Adobe Fonts ou fontes importadas à sua conta. Primeiro, abra sua biblioteca de fontes:
- Acesse Conteúdo > Mídia e marca no menu principal e, em seguida, selecione a guia Marca.
- Selecione Fontes na barra lateral. Se a sua barra lateral mostrar Estilo, selecione-o e encontre a seção Fontes.
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:
- Clique em Adicionar fonte e selecione Fonte do Google.
- Abra o menu suspenso de Google Font para ver as fontes disponíveis. Você também pode navegar pelas Google fonts para comparar as opções. Se a fonte já estiver na sua biblioteca, edite essa fonte em vez de adicioná-la novamente.
- Escolha a fonte desejada para ver uma prévia e as variantes disponíveis (por exemplo, negrito ou itálico).
- Abra Variantes de fonte e selecione as espessuras e os estilos que você quer usar. Normal 400 é obrigatório e não pode ser removido.
- Selecione uma fonte alternativa.
- Clique em Save. A fonte adicionada será exibida na seção Fontes.
Na seção Fontes, você pode ver as fontes adicionadas à sua conta. Para editar ou excluir uma fonte, selecione os 3 pontos ao lado dela.
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.
- Pesquise a fonte que você quer usar e depois selecione-a.
- Clique no ícone de código (</>) ou em Adicionar ao projeto da Web.
- Escolha um projeto web existente ou crie um novo. Selecione as espessuras e os estilos de fonte que você quer incluir e, em seguida, salve o projeto.
- Copie o URL da folha de estilo que começa com
https://use.typekit.net/do código de incorporação do projeto. Você pode incluir a extensão.css.
- Volte para sua biblioteca de fontes no Klaviyo. Clique em Adicionar fonte, selecione Adobe Fonts e, em seguida, cole a URL em Endereço CSS do Adobe Fonts.
- Clique em Ver fontes e, em seguida, selecione uma Fonte alternativa para cada nova família de fontes no projeto. Uma fonte que já está na sua conta tem uma marca de seleção e exibe a fonte alternativa existente.
- Clique em Save.
Depois de adicionar suas fontes, elas serão listadas na seção Fontes. Para editar uma fonte, selecione os três pontos ao lado dela.
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:
- Clique em Adicionar fonte e selecione Fonte personalizada.
- Insira um nome em Nome da fonte personalizada. Escolha um nome que ainda não esteja na sua biblioteca de fontes.
- Insira o URL de origem do seu arquivo de fonte e, em seguida, selecione a espessura da fonte e o estilo da fonte. Use um URL HTTPS acessível com um nome de arquivo que termine em
.woff,.woff2,.ttfou.eot. Arquivos SVG não são compatíveis. - Opcional: para adicionar outra variante, clique em Adicionar variante de fonte e insira o URL de origem, a espessura e o estilo dela. Use um URL de origem diferente e uma combinação de espessura/estilo diferente para cada variante.
- Selecione uma Fonte alternativa.
- Clique em Salvar para adicionar a fonte à seção Fontes.
Em Fontes, você pode ver as fontes importadas para a sua conta. Para excluir ou editar uma fonte, selecione os 3 pontos ao lado dela.
Editar fonte
Para editar uma fonte personalizada existente:
- Navegue até Conteúdo > Mídia e marca e selecione Marca. Selecione Fontes na barra lateral ou selecione Estilo e encontre Fontes, se essa for a opção exibida na barra lateral.
- Localize a fonte que você quer editar na seção Fontes.
- Clique nos três pontos ao lado da fonte.
- Escolha Editar fonte. A partir daqui, você pode:
- Edite a fonte substituta de qualquer fonte personalizada.
- Para fontes do Google, selecione Variantes de fonte para adicionar ou remover espessuras e estilos. Normal 400 deve permanecer selecionado.
- Para fontes importadas, incluindo fontes hospedadas pela Klaviyo, edite o URL de origem, a espessura ou o estilo de uma variante. Use Adicionar variante de fonte para adicionar outro arquivo ou clique no ícone de lixeira ao lado de uma variante para removê-la. Mantenha pelo menos 1 variante.
As variantes de fonte da Adobe são gerenciadas no seu projeto web da Adobe. Para alterá-las, abra Gerenciar fontes no Adobe Fonts, selecione Editar projeto, atualize as espessuras e os estilos e clique em Salvar alterações. A Klaviyo carrega as variantes a partir da mesma URL do projeto. Se você mudar para uma URL diferente do Typekit, exclua a fonte existente da Klaviyo e adicione-a novamente usando a nova URL.
- Quando você terminar de editar uma fonte na Klaviyo, clique em Salvar.
Como excluir uma fonte
Para excluir uma fonte:
- Navegue até Conteúdo > Mídia e marca e selecione Marca. Selecione Fontes na barra lateral ou selecione Estilo e encontre Fontes, se essa for a opção exibida na barra lateral.
- Na fonte que você quer excluir, clique nos três pontos e selecione Excluir. Uma caixa de diálogo de confirmação é aberta. Formulários que usam a fonte vão exibir a fonte alternativa quando a fonte excluída não puder mais ser carregada.
- Selecione Excluir.
Depois que uma fonte personalizada é excluída, os formulários que a usam exibem a fonte de fallback quando a fonte personalizada não consegue mais carregar. Se você adicionar novamente a mesma família de fontes, esses formulários poderão usá-la de novo.
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. Em seguida, selecione Editar.
- Na visualização do formulário, selecione o texto que você gostaria de editar.
- No editor de texto, selecione o texto que você quer formatar.
- Use o menu suspenso de fontes no editor de texto para selecionar sua fonte personalizada e a variante em Suas fontes.
Revise a fonte e a variante na prévia do formulário antes de publicar. Se a fonte personalizada não puder ser carregada, a fonte de fallback será exibida.
- Quando estiver satisfeito com as alterações, clique em Publicar ou agendar.
- Selecione a opção Publicar agora. Resolva todos os alertas de bloqueio exibidos e, em seguida, clique no botão Publicar agora para publicar suas alterações.
Fonte do site alterada pelo Klaviyo.js
Klaviyo rastreamento no site (Klaviyo.js) deve ser instalado manualmente ou pelas suas integrações de e-commerce para exibir os formulários de registro da Klaviyo no seu site. O Klaviyo.js carrega as variantes de fonte do Google e as importadas salvas na sua biblioteca de fontes, bem como a folha de estilo de cada projeto web da Adobe que você adicionou. Se o seu site usa a mesma família de fontes, essas definições podem afetar a aparência dele, como a espessura de um cabeçalho.
Há duas opções para resolver alterações causadas pelo Klaviyo.js. Você pode:
- Exclua as fontes relevantes da biblioteca de fontes da Klaviyo. Formulários que usam essas fontes exibirão as fontes de fallback quando as fontes excluídas não puderem mais ser carregadas.
- Atualize as definições de CSS e de fontes do seu site para que elas não entrem em conflito com as famílias de fontes, as espessuras e os estilos carregados pelo Klaviyo.js.
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; no entanto, 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:
- Creating an effective acquisition strategy using sign-up forms