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

Usar fontes personalizadas em post do blog ou páginas

Ultima atualização: Abril 10, 2019

Disponível para

Marketing Hub Professional, Enterprise
Basic
HubSpot CMS

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.

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: essas etapas funcionarão apenas para modelos de post do blog e página da Web e não para modelos de e-mail, pois a maioria dos clientes de e-mail não suportam fontes personalizadas

@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, substitua as URLs da fonte no bloco de código font-face para referenciar a fonte hospedada:

  • 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, 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

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';
}