Isenção de responsabilidade de tradução: esse conteúdo foi traduzido para sua conveniência com o uso de software e pode não ter sido revisado por uma pessoa. O texto oficial é a versão em inglês e sempre será o texto mais atualizado. Para ver a versão em inglês, clique aqui.
CMS-General

Como faço para implementar uma fonte personalizada no HubSpot?

Ultima atualização: January 15, 2019

Disponível para

Marketing Hub
marketing-basic-pro-enterprise
Professional, Enterprise
Basic
HubSpot CMS

Como uma alternativa ao uso de fontes padrão da web ou usando uma biblioteca de fontes como fontes do Google, você pode hospedar arquivos de fontes no gerenciador de arquivos e referenciá-los em seu arquivo CSS.

Para que as fontes carregue em todos os navegadores, você precisará de vários formatos da mesma fonte. Para os resultados mais confiáveis, você precisará de um mínimo de .woff, .ttf, & .eot versão da fonte. Você também precisará criar regras adicionais de @ font-face para estilos e pesos diferentes (ou seja, oblíquo, negrito, claro, etc.).

Observe que essas etapas funcionam apenas para conteúdo de página web e não para modelos de e-mail, pois a maioria dos clientes de e-mail não suporta fontes personalizadas

Se você estiver usando uma fonte que possa ser usada legalmente na web, você pode usar ferramenta de conversão Font Squirrel para gerar os vários formatos de arquivo. Assim que tiver todos os seus arquivos de fonte, siga estas etapas:

@font-face { font-family: 'Seu nome de fonte';  src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}

Em seguida, você precisará substituir os URLs da fonte no bloco de código tipo de letra para referenciar a hospedada:

  • Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Arquivos.
  • Clique em Upload arquivos e escolha os arquivos de fonte para carregar.  
  • Para obter melhores resultados, use o menu suspenso na URL do arquivo para selecionar o domínio que seu site está hospedado para o URL do arquivo.
  • Clique no arquivo do painel do gerenciador de arquivos e clique em Copiar URL para obter o URL da fonte para adicionar ao seu estilo.

domínio-de-mudança-do-gerenciador-de-arquivos


Depois de ter substituído a família de fontes e as URLs de fonte da fonte em seu código, você estará pronto para começar a fazer referência a essa família de fontes personalizada em seu CSS. Veja abaixo um exemplo do que o código final pode parecer, onde a fonte personalizada está sendo aplicada ao elemento do corpo da página.

/* Jurassic Park Normal */
@font-face {
font-family: 'Jurassic Park';
src: url('http://designers.hubspot.com/hubfs/jurassic-park.eot?') format('eot'), url('http://designers.hubspot.com/hubfs/jurassic-park.woff') format('woff'), url('http://designers.hubspot.com/hubfs/jurassic-park.ttf') format('truetype');
}

/* Jurassic Park Bold */
@font-face {
font-family: 'Jurassic Park'; src: url('http://designers.hubspot.com/hubfs/jurassic-park-Bold.eot?') format('eot'), url('http://designers.hubspot.com/hubfs/jurassic-park-Bold.woff') format('woff'), url('http://designers.hubspot.com/hubfs/jurassic-park-Bold.ttf') format('truetype');
font-weight: 700;
}

body {
font-family: 'Jurassic Park';
}