Como hospedar uma fonte personalizada no seu site

O que você vai aprender

Saiba como fazer upload e importar uma fonte que não esteja hospedada no Google ou na Adobe para usá-la nos formulários de registro da plataforma Klaviyo na sua loja de comércio eletrônico. Se quiser usar uma fonte importada no seu formulário de registro, há 2 opções:

1. Usar a fonte pública hospedada no seu site.
2. Hospede sua própria fonte publicamente e use a URL para importar sua fonte para seus formulários de registro.

Usar a fonte do seu site

Para começar, você pode usar a URL pública do seu site para carregar a fonte na plataforma Klaviyo.

1. Acesse seu site.
2. Clique com o botão direito do mouse e selecione Inspecionar ou Inspecionar elemento, dependendo do seu navegador da Internet.
3. A partir daí, navegue até Rede > Fontes.
4. Atualize a página.
   Você verá todas as suas fontes listadas. Se o nome da fonte não for preenchido e você vir uma sequência de números e letras, selecione a aba de visualização prévia para decidir qual fonte quer usar no formulário de registro.
5. Em Nome, clique na fonte que você quer importar.
6. Selecione a aba Cabeçalhos.
7. Copie a URL da fonte que você quer usar.
8. Na plataforma Klaviyo, vá até Conteúdo > Imagens e marca > Fontes.
9. Selecione Importar fonte.
10. Faça o upload da fonte personalizada colando o URL em Endereço de origem.

Como carregar uma fonte auto-hospedada

Para começar, se a fonte ainda não estiver hospedada publicamente online, baixe a fonte que você quer usar no seu computador. Observe que o arquivo deve estar no formato WOFF, WOFF2, TTF, EOT ou SVG para ser usado na plataforma Klaviyo. Além disso, tenha cuidado ao baixar arquivos de fontes da Internet, pois eles podem conter malware. A partir daí:

1. Faça o upload da fonte para os recursos do seu site de comércio eletrônico. Você precisará fazer isso no código do seu site.
2. Salve o código.

Para obter mais informações, vá para as respectivas centrais de ajuda da plataforma de comércio eletrônico para obter mais informações sobre como adicionar um ativo ao seu site

• Shopify
• BigCommerce

Depois de obter o URL, volte para a plataforma Klaviyo e selecione Conteúdo > Imagens e marca > Fontes. A partir daí, clique na guia Importar fonte e importe a fonte.

Fonte do site afetada pelo Klaviyo.js

O rastreamento da métrica Active on Site da Klaviyo (Klaviyo.js) deve ser instalado manualmente ou por meio de sua integração de comércio eletrônico para publicar os formulários de registro da Klaviyo no seu site. Se você 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 alterações feitas em suas fontes pelo Klaviyo.js. Você pode:

• Excluir as fontes relevantes da biblioteca de fontes da Klaviyo. 
• Atualizar 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, você 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

• Como usar fontes personalizadas em formulários de registro
• Curso: Como criar uma estratégia de aquisição eficaz usando formulários de registro
• Como adicionar fontes personalizadas em modelos de e-mail