Ir para o conteúdo principal
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.
Design Manager

Usar fontes personalizadas em post do blog ou páginas

Ultima atualização: Março 18, 2021

Disponível para

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Marketing Hub Basic (versão anterior)

Como uma alternativa ao uso de fontes da Web padrão ou uma biblioteca de fontes, como fontes do Google, você pode hospedar arquivos de fontes no gerenciador de arquivos e referenciá-los na folha de estilos. 

A adição de uma fonte personalizada não vai adicioná-la a nenhuma opção de estilo de fonte nos editores da HubSpot. Em vez disso, você precisará usar as CSS para definir o estilo dos elementos de texto das suas páginas.

Para que as fontes carreguem em todos os navegadores, você precisará de vários formatos da mesma fonte. É recomendado incluir um mínimo de versões .woff, .ttf e .eot da fonte. Se estiver usando uma fonte que possa ser usada legalmente na Web, você pode usar a ferramenta de conversão Font Squirrel para gerar os vários formatos de arquivo. Você também precisará criar regras adicionais de @font-face para estilos e pesos diferentes (ou seja, oblíquo, negrito, claro, etc.). 

Observação: as fontes personalizadas não podem ser usadas em:


Para adicionar fontes personalizadas às folhas de estilo, faça upload dos arquivos de fontes na ferramenta de arquivos: 

  • Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Arquivos.
  • Clique em Upload de arquivos e selecione os arquivos de fonte para fazer upload.   Para obter melhores resultados de renderização, clique no menu suspenso URL do arquivo e selecione o domínio no qual seu site está hospedado.
  • No painel Gerenciador de arquivos, clique no nome do arquivo de fonte.
  • No painel direito, clique em Copiar URL para obter a URL da fonte para adicionar à folha de estilos.

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

Em seguida, abra a folha de estilos no gerenciador de design: 
@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');}
  • Substitua your_font_file.xxx? pela URL na ferramenta de arquivos. Repita para cada formato. 
  • Substitua "Nome da fonte" pelo nome da sua fonte personalizada. 

Após substituir a família de fontes e as URLs de origem da fonte no código, você pode consultar a família de fontes personalizada na folha de estilos. Veja abaixo um exemplo da aparência do código final, onde a fonte personalizada está sendo aplicada ao 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';
}