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-chaveTermos-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
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.
Adicionar uma fonte do Google
Para adicionar uma fonte do Google:
- 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.
- 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.
- Selecione uma fonte Fallback.
- 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.
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
O senhor deve ter uma conta da Adobe para usar as fontes da Adobe.
Para adicionar uma Adobe Font:
- Navegue até Adobe Fonts.
- Procure o link da fonte da Adobe e selecione a fonte.
- Ao lado do nome da fonte, clique no ícone de código.
- Se necessário, digite um novo nome de projeto e clique em Salvar.
- 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.
- Navegue de volta para o Klaviyo e cole o URL no campo CSS Address (Endereço do CSS ).
- 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.
- 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.
Adição de uma fonte importadaAdiçã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:
- Dê um nome à sua fonte.
- 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.
- Opcional: Para adicionar outras variantes, selecione Add font variant (Adicionar variante de fonte) e repita a etapa 2 para essa variante.
- 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.
Editar uma fonteEditar uma 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 cartão dessa fonte, clique nos três pontos no canto superior.
- 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.
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 terminar de editar a fonte, selecione atualizar fonte.
Excluir uma fonte
Para excluir uma fonte:
- Navegue até a seção Your Fonts (Suas fontes ).
- 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.
- 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 registroUso 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:
- Navegue até a guia Formulário de registro.
- Localize o formulário que deseja editar, clique nos três pontos ao lado dele e selecione Edit form (Editar formulário).
- Na visualização do formulário, selecione o texto que deseja editar.
- No menu Text (Texto) à direita, destaque o texto.
- 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.
- 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.