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.

Usar fontes no HubSpot

Ultima atualização: Maio 22, 2023

Disponível com qualquer uma das seguintes assinaturas, salvo menção ao contrário:

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 da web (como o Google Fonts) e as fontes personalizadas têm as restrições adicionais descritas abaixo: 

Tipo de conteúdo Tipo de Fonte  
  Fontes padrão Fontes da Web

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 definições do tema e através da folha de estilos Disponível via folha de estilo  
Página - modelo codificado Disponível através de folha de estilo ou módulo personalizado Disponível via folha de estilo  
Blog Disponível através de 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 (antigo)  

Observação:nem todos os tipos de conteúdo estão disponíveis em todas as contas. Os tipos de conteúdo disponíveis para as assinaturas em sua conta da HubSpot podem ser encontrados no Catálogo de produtos e serviços.

Utilizar tipos de letra predefinidos

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údos, clique num módulo de rich text e, em seguida, realce o texto que pretende editar. 
  • Na barra de ferramentas de rich text, clique no menu pendente Tipo de letra e seleccione um tipo de letra. Os seguintes tipos de letra 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 fontes da web

As fontes da web estão disponíveis por padrão 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. Se for um programador, também pode utilizar o campo de tipo de letra para adicionar tipos de letra da Web a temas e módulos personalizados. Quando utilizadas desta forma, as fontes da web não são carregadas a partir de um serviço de terceiros; o HubSpot as fornece diretamente no domínio onde a página é carregada.

Observação:as fontes da Web não podem ser selecionadas no menu suspenso de fontes do editor de rich text. 

Você também pode utilizar serviços de terceiros, como o Google Fonts, copiando o código de importação da fonte, colando-o na folha de estilo da página e aplicando depois a fonte por meio do CSS:

  • 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 localizador, abra a folha de estilos utilizada para o 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 seleccionar os tipos de letra predefinidos utilizados no editor de correio electrónico clássico actualizado
 
Os modelos de correio electrónico codificados personalizados só estão disponíveis em contas com um Marketing Hub Professional ou Enterprise
 
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 localizador, abra o modelo de correio electrónico codificado personalizado.
  • Na secção<head> do modelo, cole o código @import entre as etiquetas <style>....</style> tags. 
  • No código do corpo da mensagem de correio electrónico, adicione o tipo de letra personalizado no estilo em linha
  • No canto superior direito, clique em Atualizar ou Publicar para aplicar as alterações. 

Utilizar um tipo de letra do Google numa CTA (antigo)

  • Copie o código do Google para definir regras CSS para esse tipo de letra.
  • Na sua conta da HubSpot, navegue até Marketing > Captura de leads > CTAs.
  • No canto superior esquerdo, clique no menu pendente e seleccione CTAs (Legado).
  • Passe o cursor do rato sobre uma CTA, clique no menu pendente Acções e seleccione 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 esse tipo de letra. 
  • No canto inferior direito, clique em Próximo. Em seguida, clique em Salvar.

Usar uma fonte do Google em um formulário

  • Na sua conta da HubSpot, navegue até Marketing > Captura de leads > Formulários.
  • Passe o cursor do rato sobre o nome do formulário e clique em Acções > Editar formulário ou Criar um novo formulário.
  • No editor de formulários, clique no separador Estilo & preview
  • No menu da barra lateral esquerda, clique na secção Estilo .
  • Na secção Texto , clique no menu pendente Família de letra e seleccione um Tipo de letra do Google
  • No canto superior direito, clique em Actualizar ou Publicar para activar as suas alterações. 

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 alternativa à utilização de tipos de letra padrão da Web ou de uma biblioteca de tipos de letra como o Google Fonts, pode alojar ficheiros de tipos de letra na ferramenta de ficheiros e, em seguida, referenciá-los na folha de estilos. 

Observação: as fontes personalizadas só estão disponíveis em contas com acesso ao gerenciador de design e precisam de ser aplicadas com CSS. A adição de um tipo de letra personalizado não adiciona o tipo de letra aos menus pendentes de estilo no editor de conteúdos.

Para usar uma fonte no conteúdo, carregue os arquivos da fonte na ferramenta de arquivos. A HubSpot recomenda carregar um mínimo das versões .woff, .ttf, &.eot da fonte para garantir que sua fonte seja carregada em todos os navegadores. Pode utilizar o modo Expert na ferramenta de conversão do Font Squirrel para gerar formatos de ficheiro 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 localizador, abra a folha de estilos utilizada para o seu conteúdo.
  • Para cada estilo de letra: 
    • Na parte superior da folha de estilos, cole o seguinte código: 
@font-face { font-family: 'Your Font Name'; 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 your_font_file.xxx? pelo URL da ferramenta de ficheiros. 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 os seus leitores, recomenda-se a utilização de tipos de letra Web predefinidos nas mensagens de correio electrónico. 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 localizador, abra o modelo de correio electrónico codificado personalizado.
  • Para cada estilo de letra:
    • Na secção <head> do modelo, cole este código entre as etiquetas <style></style>. ...: 
@font-face { font-family: 'Your Font Name'; 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 your_font_file.xxx? pelo URL da ferramenta de ficheiros. Repita para cada formato de arquivo. 
  • No código do corpo da mensagem de correio electrónico, adicione o tipo de letra personalizado no estilo em linha
  • No canto superior direito, clique em Atualizar ou Publicar para aplicar as alterações. 

Utilizar um tipo de letra personalizado numa CTA (antigo)

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.
  • No canto superior esquerdo, clique no menu pendente e seleccione CTAs (Legado).
  • Passe o cursor do rato sobre uma CTA, clique no menu pendente Acções e seleccione Editar
  • No painel direito, clique em Opções avançadas
  • Na caixa de texto, cole este código: 

font-family: 'Your Font Name';

  • 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 de blog e página. Saiba como adicionar uma fonte personalizada a um modelo de e-mail codificado personalizado

  • Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Ferramentas de design.
  • No localizador, abra o módulo personalizado.
  • Na seção module.css, cole o seguinte código: 
@font-face { font-family: 'Your Font Name'; 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 your_font_file.xxx? pelo URL da ferramenta de ficheiros. 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. 
Esse artigo foi útil?
Este formulário deve ser usado apenas para fazer comentários sobre esses artigos. Saiba como obter ajuda para usar a HubSpot.