Usar fontes no HubSpot

As fontes no HubSpot estão disponíveis de diferentes maneiras, dependendo do tipo de conteúdo e do tipo de fonte. Algumas fontes padrão estão disponíveis em todos os editores de conteúdo. Pode ser necessário adicionar fontes da web e fontes personalizadas às configurações de tema, folhas de estilo, módulos personalizados ou modelos codificados.

Antes de começar

Antes de começar a usar fontes no HubSpot, revise os requisitos e considerações.

Compreender limitações e considerações

• Nem todos os tipos de conteúdo estão disponíveis em todas as contas. Para confirmar quais tipos de conteúdo estão disponíveis para sua assinatura, revise o Catálogo de serviços do produto &.
• Revise a tabela abaixo para entender quais opções de fonte estão disponíveis para cada tipo de conteúdo:

Usar fontes padrão em módulos rich text

As fontes padrão são suportadas em todo o conteúdo do HubSpot, embora as opções disponíveis e onde você pode aplicá-las dependam do tipo de conteúdo.

1. Acesse seu conteúdo:

   • Páginas do site: Na sua conta da HubSpot, acesse Conteúdo > Páginas do site.
   • Landing pages: Na sua conta da HubSpot, acesse Conteúdo > Landing pages.
   • Blog: Na sua conta da HubSpot, acesse Conteúdo > Blog.
   • E-mail: Na sua conta da HubSpot, navegue até Marketing > E-mail.
2. Clique no nome do conteúdo.
3. No editor de conteúdo, clique em um módulo de rich text e destaque o texto que deseja editar. 
4. 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:

Usar fontes da web

As fontes da web são compatíveis com alguns conteúdos do HubSpot, mas não estão disponíveis no menu suspenso Fonte no editor de rich text. Dependendo do tipo de conteúdo, as fontes da web podem ser aplicadas em configurações de tema, folhas de estilo, módulos personalizados ou modelos codificados. 

Os desenvolvedores podem usar o campo de fonte para adicionar fontes da web a temas e módulos personalizados. Quando fontes da web são adicionadas dessa forma, o HubSpot as carrega diretamente no domínio do conteúdo, em vez de carregá-las de um serviço de terceiros.

Use serviços de terceiros, como o Google Fonts , copiando o código de importação da fonte, colando-o na folha de estilo do conteúdo e aplicando depois a fonte por meio do CSS:

1. Acesse fonts.google.com.
2. Na barra de pesquisa, insira um nome de fonte. 
3. Clique no nome da fonte para visualizar uma lista de estilos disponíveis para importar.
4. Clique em Obter fonte no canto superior direito.
5. Clique em Obter código incorporado no canto superior direito.
6. Na coluna direita, selecione @import na guia Web .
7. Copie o código @import sem a <style> tag.
8. Copie o código de  classe de CSS para definir regras de CSS. 

9. Depois de copiar o código do Google Fonts, você pode 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 (antiga)
  • Usar uma fonte do Google em um formulário
  • Usar uma fonte do Google em um módulo personalizado

Usar uma fonte do Google em uma folha de estilo

1. Copie o código @import da fonte do Google Fonts.
2. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
3. No Finder, abra a folha de estilo usada para seu conteúdo.
4. Cole o código @import na linha 1 da folha de estilos. 
5. Adicione o código para definir regras de CSS aos seletores apropriados na folha de estilo.
6. No canto superior direito, clique em Publicar alterações para aplicar as alterações. 

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

As fontes do Google são suportadas no Apple Mail e em alguns outros clientes de e-mail, mas o suporte geral é limitado. Os clientes de e-mail mais populares suportam apenas fontes da web padrão. Saiba mais sobre como selecionar as fontes padrão usadas no editor de e-mail clássico. 

Para adicionar uma fonte do Google a um modelo de e-mail codificado personalizado: 

1. Copie o código @import da fonte do Google Fonts.
2. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
3. No Finder, abra o modelo de e-mail codificado personalizado.
4. Na seção<head> do modelo, cole o código @import entre as tags <style>....</style>. 
5. <body> Na seção do modelo, adicione a fonte personalizada em estilo embutido. 
6. No canto superior direito, clique em Publicar alterações para aplicar as alterações. 

Usar uma fonte do Google em uma CTA (antiga)

1. Copie o código do Google para definir regras de CSS para essa fonte.
2. Na sua conta HubSpot, acesse Marketing > CTAs.
3. Passe o mouse sobre uma CTA e clique em Ações > Editar. 
4. No painel direito, clique em Opções avançadas. 
5. Na caixa de texto, cole o código do Google para definir as regras CSS para essa fonte. 
6. No canto inferior direito, clique em Próximo. Em seguida, clique em Salvar.

Usar uma fonte do Google em um formulário

1. Na sua conta HubSpot, acesse Marketing > Formulários.
2. Passe o cursor do mouse sobre o nome do formulário e clique em Ações, Editar > formulário ou Criar um novo formulário.
3. No editor de formulários, clique na guia Estilo e visualização . 
4. No menu da barra lateral esquerda, clique na seção Estilo.
5. Na seção Texto , clique no menu suspenso Família de fontes e selecione uma fonte do Google. 
6. No canto superior direito, clique em Atualizar ou Publicar para aplicar as 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.

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No localizador, clique no nome de um módulo personalizado. Saiba mais sobre como criar um módulo personalizado.
3. No inspetor, clique no menu suspenso Adicionar campo na seção Campos e selecione Fonte. Saiba mais sobre como trabalhar com campos de fonte.

4. No canto superior direito, clique em Publicar alterações para aplicar as alterações. 
5. Acesse seu conteúdo:
   • Páginas do site: Na sua conta da HubSpot, acesse Conteúdo > Páginas do site.
   • Landing pages: Na sua conta da HubSpot, acesse Conteúdo > Landing pages.
   • Blog: Na sua conta da HubSpot, acesse Conteúdo > Blog.
6. Clique no nome do conteúdo que usa o módulo personalizado. 
7. No editor de conteúdo, clique no módulo personalizado. 
8. No editor da barra lateral, clique no menu suspenso Campo de fonte e selecione uma fonte do Google. 

Usar fontes personalizadas

Como alternativa ao uso de fontes da web padrão ou de uma biblioteca de fontes como o Google Fonts, carregue arquivos de fonte e use-os em temas ou referencie-os em folhas de estilo. 

Usar fontes personalizadas nos temas

No editor de temas, carregue uma fonte personalizada e use-a em páginas e posts. Os arquivos de fonte são suportados nos seguintes formatos: TTF, OTF, WOFF.

Carregar fontes personalizadas para páginas ou posts

Depois de carregar fontes personalizadas, elas estarão disponíveis para páginas, posts ou artigos da Central de Conhecimento.

1. Acesse seu conteúdo:

   • Páginas do site: Na sua conta da HubSpot, acesse Conteúdo > Páginas do site.
   • Landing pages: Na sua conta da HubSpot, acesse Conteúdo > Landing pages.
   • Blog: Na sua conta da HubSpot, acesse Conteúdo > Blog.
2. Clique no nome do conteúdo. 
3. No editor de conteúdo, clique no menu Editar e selecione Tema: [Nome do tema].
4. No menu da barra lateral esquerda, clique em qualquer menu suspenso de fontes e selecione Gerenciar fontes de marcas .
5. Siga as etapas neste artigo da central de conhecimento para adicionar ou editar suas fontes.

Carregar fontes personalizadas para artigos da central de conhecimento

Depois de carregar fontes personalizadas, elas estarão disponíveis para páginas, posts ou artigos da Central de Conhecimento.

1. No seu portal da HubSpot, acesse Atendimento > Central de Conhecimento.
2. Na parte superior direita, clique em Personalizar modelo.
3. Na barra lateral esquerda, clique na guia Design .
4. Na barra lateral esquerda, clique em Estilos de fonte.
5. Clique no menu suspenso Qualquer fonte e selecione Gerenciar fontes de marca.
6. Siga as etapas neste artigo da central de conhecimento para adicionar ou editar suas fontes.

Editar fontes personalizadas

Depois de carregar uma fonte personalizada no editor de temas, você pode carregar fontes adicionais, personalizar fontes existentes com estilos de fonte adicionais ou excluir fontes.

Usar fontes personalizadas nas folhas de estilo

Como alternativa ao uso de fontes da Web padrão ou ao uso de uma biblioteca de fontes como o Google Fonts, você pode hospedar arquivos de fontes na ferramenta de arquivos e, em seguida, referenciá-los em sua 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 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. É recomendado enviar no mínimo as versões .woff, .ttf e .eot da fonte para garantir que ela seja carregada em todos os navegadores. Você pode usar o modo Expert na ferramenta de conversão do Font Squirrel para gerar formatos de arquivo adicionais.

1. Na sua conta HubSpot, acesse Conteúdo > Arquivos. Se estiver usando as ferramentas gratuitas do HubSpot, acesse Marketing > E-mail. No canto superior direito, clique em Ferramentas de e-mail e selecione Arquivos.
2. Clique em Carregar arquivos.
3. No disco rígido do seu computador, selecione os arquivos de fonte e clique em Abrir.
4. Clique no nome de um arquivo de fonte carregado.
5. 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. 

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No Finder, abra a folha de estilo usada para seu conteúdo.
3. Para cada estilo de fonte: 
   • 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? pela URL da ferramenta de arquivos. Repita para cada formato de arquivo.

4. Crie regras de CSS com a propriedade font-family para aplicar a fonte personalizada. 
5. No canto superior direito, clique em Atualizar ou Publicar para aplicar as alterações. 

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.

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No localizador, clique no nome do seu modelo de e-mail codificado personalizado.
3. Para cada estilo de fonte:
   • <head> Na seção do modelo, cole este código entre as <style>tags ....</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');}

1. • Substitua Nome da sua fonte pelo nome da fonte personalizada.
   • Substitua your_font_file.xxx? pelo URL da ferramenta de arquivos. Repita para cada formato de arquivo. 

4. No código do corpo do e-mail, adicione a fonte personalizada em estilo embutido. 
5. 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 ao seu tema, você pode usá-la com CTAs.

1. Na sua conta HubSpot, acesse Marketing > CTAs.
2. No canto superior esquerdo, clique no menu suspenso e selecione CTAs.
3. Passe o mouse sobre uma CTA e clique em Ações > Editar. 
4. No painel esquerdo do editor de CTA, clique na guia Design. 
5. Clique na seção Estilos para expandir.
6. Clique no menu suspenso Fonte principal e selecione a fonte personalizada. 
7. Continue a criar a CTA. 

Usar uma fonte personalizada em uma CTA (antiga)

Semelhante às CTAs, depois de carregar um arquivo de fonte personalizado, use-o com as CTAs antigas.

1. Na sua conta HubSpot, acesse Marketing > CTAs.
2. Passe o mouse sobre uma CTA e clique em Ações > Editar. 
3. No painel direito, clique em Opções avançadas. 
4. Na caixa de texto, cole este código:
   
   font-family: 'Your Font Name';
5. Substitua o Nome da sua fonte pelo nome da fonte personalizada.
6. No canto inferior direito, clique em Próximo. Em seguida, clique em Salvar.

Usar uma fonte personalizada em um módulo personalizado

Depois de adicionar uma fonte personalizada à ferramenta de arquivos, use-a em módulos personalizados de blog e página. Saiba como adicionar uma fonte personalizada a um modelo de e-mail codificado personalizado. 

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No localizador, clique no nome do módulo personalizado.
3. No editor de módulos, 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');}

5. • Substitua Nome da sua fonte pelo nome da fonte personalizada.
   • Substitua your_font_file.xxx? pelo URL da ferramenta de arquivos. Repita para cada formato de arquivo.
6. Crie regras de CSS com a propriedade font-family para aplicar a fonte personalizada. 
7. No canto superior direito, clique em Publicar alterações para aplicar as alterações.