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 de tema |
✓ |
Disponível nas configurações de tema e 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 |
✓ |
|
| 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 |
|
| Central 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 (antiga) |
✓ |
✓ |
✓ |
|
| CTA |
✓ |
✓ |
✓ |
|
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.
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:
- Landing pages:
- Blog:
- Central de conhecimento:
- E-mail:
- Clique no nome do conteúdo.
- 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**
-
-
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 desenvolvedor, também poderá usar o campo de fonte para adicionar fontes da web a temas e módulos personalizados. Quando usadas dessa maneira, as fontes da web não são carregadas de um serviço de terceiros; em vez disso, o HubSpot as carregará diretamente no domínio do conteúdo.
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 do conteúdo 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.
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.
- 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.
- 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
Os modelos de e-mail codificados personalizados só estão disponíveis em contas com uma assinatura do 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.
- 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 Publicar alterações para aplicar as alterações.
Usar uma fonte do Google em uma CTA (antiga)
Usar uma fonte do Google em um formulário
- 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.
- No editor de formulários, clique na guia Estilo e visualização .
- No menu da barra lateral esquerda, clique na seção Estilo.
- Na seção Texto , clique no menu suspenso Família de fontes e selecione uma fonte do Google.
- 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.
- No canto superior direito, clique em Publicar alterações para aplicar as alterações.
-
Acesse seu conteúdo:
- Páginas do site:
- Landing pages:
- Blog:
- Clique no nome do conteúdo que usa o módulo personalizado.
- 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 ao uso de fontes da web padrão ou de uma biblioteca de fontes como o Google Fonts, você pode carregar arquivos de fonte e usá-los em temas ou referenciá-los em folhas de estilo.
Usar fontes personalizadas nos temas
No editor de temas, você pode carregar uma fonte personalizada e usá-la em páginas e posts. Os arquivos de fonte são suportados nos seguintes formatos: TTF, OTF, WOFF.
Carregar fontes personalizadas
-
Acesse seu conteúdo:
- Páginas do site:
- Landing pages:
- Blog:
- Clique no nome do conteúdo.
- No editor de conteúdo, clique no menu Editar e selecione Tema: [Nome do tema].
- No menu da barra lateral esquerda, clique em um menu suspenso de fonte e selecione Carregar uma fonte personalizada.
- No painel direito, insira um rótulo para a fonte no campo Nome da fonte.
- Clique em Escolher arquivos de fonte, selecione um ou mais arquivos de fonte e clique em Próximo.
- Clique no menu suspenso Estilo de fonte 1 e selecione o estilo que o seu arquivo de fonte usa. Cada estilo deve usar um arquivo de fonte separado.
- Para adicionar mais estilos de fonte, clique em + Adicionar outro estilo de fonte e, em seguida, adicione seus estilos de fonte. Cada arquivo de fonte carregado deve ter pelo menos um estilo associado.
- Depois de adicionar todos os estilos de fonte aplicáveis, clique em Concluído.
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.
-
Acesse seu conteúdo:
- Páginas do site:
- Landing pages:
- Blog:
- Clique no nome do conteúdo.
- No editor de conteúdo, clique no menu Editar e selecione Tema: [Nome do tema].
- No menu da barra lateral esquerda, clique para expandir a seção Fontes.
- Clique em um menu suspenso de fonte e selecione Gerenciar fontes personalizadas.
- Para adicionar uma nova fonte, clique em Adicionar uma fonte personalizada na caixa de diálogo.
- Para editar uma fonte:
- Na caixa de diálogo, clique no menu suspenso Ações ao lado da fonte e selecione Editar.
- Para alterar o nome da fonte, clique em Editar ao lado do nome da fonte e insira um novo nome de fonte.
- Para adicionar mais estilos de fontes, clique em Adicionar outro estilo de fonte e, em seguida, clique no menu suspenso Estilo de fonte e selecione um estilo. Clique em Carregar e, em seguida, carregue um arquivo de fonte.
- Para excluir um estilo de fonte, clique no ícone deletededel excluir ao lado do estilo de fonte. Você não poderá excluir um estilo de fonte se não houver outros estilos de fonte listados.
- Clique em Salvar.
- Para excluir uma fonte, clique no menu suspenso Ações na caixa de diálogo e selecione Excluir.
Observação: a exclusão de uma fonte a remove de todos os menus suspensos, mas os arquivos dela permanecerão na ferramenta de arquivos até serem excluídos.
- Quando terminar de editar as fontes, clique em Concluído.
Usar fontes personalizadas nas folhas de estilo
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 na ferramenta de arquivos e 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 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.
- 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.
- 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: '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 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.
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.
- 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: '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 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 ao seu tema, você pode usá-la com CTAs:
- No canto superior esquerdo, clique no menu suspenso e selecione CTAs.
- Passe o mouse sobre uma CTA e clique em Ações > Editar.
- No painel esquerdo do editor de CTA, clique na guia Design.
- Clique na seção Estilos para expandir.
- Clique no menu suspenso Fonte principal e selecione a fonte personalizada.
- Continue a criar a CTA.
Usar uma fonte personalizada em uma CTA (antiga)
Semelhante às CTAs, depois de carregar um arquivo de formulário personalizado, você pode usá-lo com as CTAs antigas:
- Passe o mouse sobre uma CTA e clique em Ações > 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.
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.
- No Finder, 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 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 Publicar alterações para aplicar as alterações.