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.

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
Usar uma fonte do Google em um modelo de e-mail codificado personalizado
Usar uma fonte do Google em uma CTA
Usar uma fonte do Google em um módulo personalizado

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.

No Finder à esquerda, abra o módulo personalizado. Saiba mais sobre como criar um módulo personalizado.
No inspetor à direita, clique no menu suspenso Adicionar campo na seção Campos e selecione Fonte. Saiba mais sobre como trabalhar com campos de fonte.

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.