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.
Landing Pages

Usar fontes no HubSpot

Ultima atualização: Outubro 15, 2021

Disponível para

Todos os produtos e planos

As fontes disponíveis para o conteúdo no HubSpot dependem do tipo de conteúdo e do tipo de fonte. Certas fontes padrão estão disponíveis em todos os editores de conteúdo, enquanto que as fontes do Google Fonts e as fontes personalizadas têm restrições adicionais, descritas abaixo: 

Tipo de conteúdo Tipo de Fonte  
  Fontes padrão Google Fonts

Fontes personalizadas

 
Página - modelos Starter Disponível na guia Design do editor de conteúdo Não disponível  
Página - modelos de tema Disponível nas configurações de tema e via folha de estilo Disponível via folha de estilo  
Página - modelo codificado Disponível via folha de estilo ou módulo personalizado Disponível via folha de estilo  
Blog Disponível via folha de estilo ou módulo personalizado Disponível via folha de estilo  
E-mail Algumas fontes padrão não estão disponíveis no editor de e-mail de arrastar e soltar Disponível apenas para modelos de e-mail codificados personalizados; não suportado pela maioria dos clientes de e-mail Disponível apenas para modelos de e-mail codificados personalizados; não suportado pela maioria dos clientes de e-mail  
Base de conhecimento Disponível na guia Design do editor de modelos Não disponível  
Módulo personalizado Disponível para módulos personalizados não utilizados em e-mails Disponível para módulos personalizados não utilizados em e-mails  
CTA  

Usar fontes padrão

As fontes padrão podem ser usadas em todos os tipos de conteúdo e são projetadas para carregar na maioria das plataformas e dispositivos. 

  • Acesse seu conteúdo:

    • Páginas do site: Na sua conta da HubSpot, navegue até Marketing > Site > Páginas do site.
    • Landing Pages: Na sua conta da HubSpot, navegue até Marketing > Landing Pages.
    • Blog: Na sua conta da HubSpot, navegue até Marketing > Site > Blog.
    • Central de conhecimento: Na sua conta da HubSpot, navegue até Serviço > Base de conhecimento.
    • E-mail: Na sua conta da HubSpot, navegue até Marketing > Email.
  • Passe o cursor do mouse sobre o conteúdo e clique em Editar
  • No editor de conteúdo, clique em um módulo de rich text e destaque o texto que deseja editar. 
  • Na barra de ferramentas de rich text, clique no menu suspenso Fonte e selecione uma fonte. As seguintes fontes estão disponíveis nos módulos de rich text: 
    • Andale Mono*

    • Arial

    • Book Antiqua*

    • Courier New

    • Georgia

    • Helvetica

    • Impact*

    • Lato**
    • Merriweather**
    • Monaco*
    • Symbol*

    • Tahoma

    • Terminal*

    • Times New Roman

    • Trebuchet MS

    • Verdana

*Não disponível no editor de e-mail de arrastar e soltar.  

**Disponível apenas como uma fonte da web no editor de e-mail de arrastar e soltar.

Usar Google Fonts

As fontes do Google estão disponíveis no editor de conteúdo para páginas que usam temas e modelos Starter, bem como para artigos da central de conhecimento e módulos personalizados. Para usar uma fonte do Google em outras páginas, você precisará copiar o código de importação da fonte, colá-lo na folha de estilo da página e aplicar a fonte com as regras de CSS.

Saiba mais sobre como os desenvolvedores podem usar campos de fonte para adicionar fontes do Google a temas e módulos personalizados na documentação da HubSpot para desenvolvedores

Observação: As fontes do Google não podem ser selecionadas no menu suspenso de fontes do editor de rich text. 

  • Acesse fonts.google.com.
  • Na barra de pesquisa, insira um nome de fonte
  • Clique no nome da fonte para visualizar uma lista de estilos disponíveis para importar.
  • Ao lado de cada estilo que deseja importar, clique em + Selecionar este estilo
  • No painel direito, selecione @import na seção Usar na web
  • Copie o código da fonte: 
    • Na seção Usar na web, copie o código @import sem a tag <style>.
    • No campo Regras de CSS para especificar famílias, copie o código para definir regras de CSS. 

copy-google-font

Depois de obter o código do Google Fonts, você poderá adicionar a fonte ao seu conteúdo do HubSpot: 

Usar uma fonte do Google em uma folha de estilo

  • Copie o código @import da fonte do Google Fonts.
  • Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Ferramentas de design.
  • No Finder, abra a folha de estilo usada para seu conteúdo.
  • Cole o código @import na linha 1 da folha de estilo. 
  • Adicione o código para definir regras de CSS aos seletores apropriados na folha de estilo. 
add-google-fonts-imported-font-to-stylesheet
  • No canto superior direito, clique emPublicarou Atualizar para ativar suas alterações. 

Usar uma fonte do Google em um modelo de e-mail codificado personalizado

Embora as fontes do Google sejam suportadas pelo Apple Mail e alguns outros clientes de e-mail, o suporte geral é limitado e a maioria dos clientes de e-mail populares suporta apenas fontes da web padrão. Saiba mais sobre como selecionar as fontes padrão usadas no editor de e-mail clássico atualizado.  
 
Para adicionar uma fonte do Google a um modelo de e-mail codificado personalizado: 
  • Copie o código @import da fonte do Google Fonts.
  • Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Ferramentas de design.
  • No Finder, abra o modelo de e-mail codificado personalizado.
  • Na seção<head> do modelo, cole o código @import entre as tags <style>....</style>
  • No código do corpo do e-mail, adicione a fonte personalizada em estilo embutido
  • No canto superior direito, clique em Atualizar ou Publicar para aplicar as alterações. 

Usar uma fonte do Google em uma CTA

  • Copie o código do Google para definir regras de CSS para essa fonte.
  • Na sua conta da HubSpot, navegue até Marketing > Captura de leads > CTAs.
  • Passe o mouse sobre uma campanha e clique no menu suspenso Ações e selecione Editar.
  • No painel direito, clique em Opções avançadas.
  • Na caixa de texto, cole o código do Google para definir as regras CSS para essa fonte. 
  • No canto inferior direito, clique em Próximo. Em seguida, clique em Salvar.

Usar uma fonte do Google em um módulo personalizado

Observação: As fontes do Google não estão disponíveis para módulos personalizados usados em modelos de e-mail.


  • Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Ferramentas de design.

click-add-field

  • No canto superior direito, clique em Publicar alterações para aplicar as alterações.
  • Acesse seu conteúdo:

    • Páginas do site: Na sua conta da HubSpot, navegue até Marketing > Site > Páginas do site.
    • Landing Pages: Na sua conta da HubSpot, navegue até Marketing > Landing Pages.
    • Blog: Na sua conta da HubSpot, navegue até Marketing > Site > Blog.
  • Passe o cursor do mouse sobre o conteúdo que usa o módulo personalizado e clique em Editar
  • No editor de conteúdo, clique no módulo personalizado
  • No editor da barra lateral, clique no menu suspenso Campo de fonte e selecione uma fonte do Google

Usar fontes personalizadas

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

Observação: as fontes personalizadas precisam ser aplicadas via CSS. A adição de uma fonte personalizada não irá adicioná-la aos menus suspensos de estilo no editor de conteúdo. 

Para usar uma fonte no conteúdo, carregue os arquivos da fonte na ferramenta de arquivos. A HubSpot recomenda carregar no mínimo as versões .woff, .ttf e .eot da fonte para garantir que ela seja carregada em todos os navegadores

s. Você pode usar o modo Expert na ferramenta de conversão do Font Squirrel para gerar formatos de arquivo adicionais.

  • Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Arquivos.
  • Clique em Carregar arquivos
  • No disco rígido do seu computador, selecione os arquivos de fonte e clique em Abrir
  • Clique no nome de um arquivo de fonte carregado. 
  • No painel direito, clique em Copiar URL para copiar a URL onde o arquivo está hospedado. Você precisará da URL da fonte em cada formato de arquivo. 

Usar uma fonte personalizada em uma folha de estilo

Depois de adicionar uma fonte personalizada à ferramenta de arquivos, você poderá referenciá-la em uma folha de estilo. Cada estilo de fonte (itálico, negrito etc.) exigirá uma regra @font-face separada. Saiba mais sobre como trabalhar com folhas de estilo no HubSpot

  • Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Ferramentas de design.
  • No Finder, abra a folha de estilo usada para seu conteúdo.
  • Para cada estilo de fonte: 
    • Na parte superior da folha de estilos, cole o seguinte código:  
@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 Nome da sua fonte pelo nome da fonte personalizada.
    • Substitua seu_arquivo_fonte.xxx? pela URL na ferramenta de arquivos. Repita para cada formato de arquivo. 
  • Crie regras de CSS com a propriedade font-family para aplicar a fonte personalizada. 
  • No canto superior direito, clique em Atualizar ou Publicar para aplicar as alterações. 

sample-custom-font-in-stylesheet

Usar uma fonte personalizada em um modelo de e-mail codificado personalizado

Fontes personalizadas não são suportadas nos clientes de e-mail mais populares. Para garantir uma experiência consistente para seus leitores, é recomendável usar fontes web padrão em e-mails. No entanto, se quiser adicionar uma fonte personalizada a um modelo de e-mail codificado, você poderá fazer isso depois de adicionar a fonte personalizada à ferramenta de arquivos.

  • Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Ferramentas de design.
  • No Finder, abra o modelo de e-mail codificado personalizado.
  • Para cada estilo de fonte:
    • Na seção <head> do modelo, cole este código entre as tags <style>....</style>: 
@font-face { font-family: 'Seu nome de fonte';  src: url('seu_arquivo_fonte.eot?') format('eot'), url('seu_arquivo_fonte.woff') format('woff'), url('seu_arquivo_fonte.ttf') format('truetype');}
    • Substitua Nome da sua fonte pelo nome da fonte personalizada.
    • Substitua seu_arquivo_fonte.xxx? pela URL na ferramenta de arquivos. Repita para cada formato de arquivo. 
  • No código do corpo do e-mail, adicione a fonte personalizada em estilo embutido
  • No canto superior direito, clique em Atualizar ou Publicar para aplicar as alterações. 

Usar uma fonte personalizada em uma CTA

Depois de adicionar uma fonte personalizada à ferramenta de arquivos, você poderá usá-la em CTAs: 

  • Na sua conta da HubSpot, navegue até Marketing > Captura de leads > CTAs.
  • Passe o mouse sobre uma campanha e clique no menu suspenso Ações e selecione Editar.
  • No painel direito, clique em Opções avançadas.
  • Na caixa de texto, cole este código: 

font-family: “Nome da sua fonte';

  • Substitua o Nome da sua fonte pelo nome da fonte personalizada
  • No canto inferior direito, clique em Próximo. Em seguida, clique em Salvar

set-custom-font-for-cta

Usar uma fonte personalizada em um módulo personalizado

Depois de adicionar uma fonte personalizada à ferramenta de arquivos, você poderá usá-la em módulos personalizados: 

  • Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Ferramentas de design.
  • No Finder, abra o módulo personalizado.
  • Na seção module.css, cole o seguinte código: 
@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 Nome da sua fonte pelo nome da fonte personalizada.
  • Substitua seu_arquivo_fonte.xxx? pela URL na ferramenta de arquivos. Repita para cada formato de arquivo.
  • Crie regras de CSS com a propriedade font-family para aplicar a fonte personalizada. 

custom-module-custom-font

  • No canto superior direito, clique em Publicar alterações para aplicar as alterações.