Voltar para o suporte Design do site Alterar as fontes do seu site

Alterar as fontes do seu site

Escolher uma fonte é uma ótima maneira de dar um visual único para seu site. Cada tema tem uma lista selecionada de fontes para você escolher, incluindo o Google Fonts.

Para alterar suas fontes, você usará uma opção diferente que depende do tema que está usando:

Alterar fontes com o editor de sites

Essa funcionalidade está disponível nos sites com os planos WordPress.com Explorer, Creator e Entrepreneur. Essa funcionalidade também está disponível para sites no antigo plano Pro.

Se o seu site usa um tema compatível com o editor de sites, você pode alterar as fontes do site com as configurações de Tipografia acessíveis no botão Estilos no editor de sites.

Uma seta aponta para o botão Estilos no editor de sites.

Como alterar as fontes com estilos globais

Se o seu site usar qualquer um desses temas, é possível usar os Estilos Globais para alterar a fonte do seu site

  1. No painel, clique em Páginas.
  2. Clique no botão Adicionar nova ou no título de uma página existente para abri-la no editor do WordPress.
    • Selecione seu layout preferido, ou use o layout em branco padrão caso adicione uma nova página.
  3. No editor, clique no botão Estilos globais. O botão “Aa” está localizado entre o ícone de configurações e o botão verde do Jetpack.
  4. Clique no menu suspenso em Títulos ou Fonte base para ver as opções de fonte disponíveis.
Uma caixa ao redor do botão Estilos globais, localizada no canto superior esquerdo do editor de blocos, entre os botões Configurações da página e Configurações do Jetpack.

As fontes são definidas em pares, uma para os títulos e outra para a fonte base.

Clique em Publicar no menu Estilos globais para salvar o novo par de fontes ou em Redefinir para reverter as alterações.

Publicar suas alterações no menu Estilos globais não publicará a página específica na qual você está trabalhando.

Como ajustar o tamanho da fonte

O editor de blocos oferece opções para alterar individualmente o tamanho das fontes de blocos.

Para alterar o tamanho da fonte de títulos, selecione uma opção diferente (H1, H2, etc.) no bloco de título.

A barra de ferramentas acima de um bloco de título com a opção de alterar o tamanho do título a ser usado.
As opções H5 a H6 ficam nas Configurações do bloco, ao lado do editor de blocos.

Os parágrafos, botões e outros blocos de textos têm a opção Tipografia nas Configurações do bloco, onde é possível alterar o texto para um tamanho predefinido ou digitar um tamanho de fonte personalizado.

Se você não estiver vendo a barra lateral, clique no ícone Configurações no canto superior direito para exibi-las. Esse ícone se parece com um quadrado com duas colunas irregulares.

O ícone de configurações no editor com o plano de fundo preto e a dica de ferramenta "Configurações" abaixo dele.
Clique no ícone Configurações para abrir as configurações do bloco.

Alterar fontes no Personalizador

Em diversos temas, é possível alterar a fonte em Aparência → Personalizar. Se você não vir as opções de fonte no Personalizador, verifique se o seu tema é compatível com o método de alteração de fontes Estilos globais.

  1. No painel, acesse Aparência Personalizar.
  2. Clique em Fontes no Personalizador.
  3. Clique no menu suspenso em Títulos ou Fonte base para ver as opções de fonte disponíveis.
A seção Fontes personalizadas do Personalizador exibindo os menus suspensos Títulos e Fonte base.

As fontes são definidas em pares, uma para os títulos e outra para a fonte base.

Sempre que você altera a fonte, a visualização ao vivo atualiza para que você veja como a fonte ficará no seu blog.

Ajuste o tamanho e estilo da fonte

Estilo da fonte: para ajustar os estilos das fontes de títulos, clique na opção abaixo e à esquerda da fonte. Os estilos disponíveis dependerão da fonte escolhida.

Tamanho da fonte: para ajustar o tamanho das fontes base ou de título, clique na opção de tamanho abaixo e à direita de cada fonte selecionada e escolha um tamanho no menu suspenso.

O painel Fontes personalizadas com a opção Títulos definida como Tangerine, o estilo da fonte como negrito e o tamanho da fonte como enorme.

💡

Você pode alterar os tamanhos globais de fonte padrão com o CSS personalizado.

Salve as fontes

Quando estiver satisfeito com suas seleções de fonte, publique seu site ou salve o rascunho se quiser continuar personalizando seu site antes de publicá-lo.

Altere as fontes

Depois de selecionar as fontes personalizadas, você poderá alterá-las quantas vezes quiser.

Para isso, acesse Aparência PersonalizarFontes e selecione uma fonte base ou de cabeçalho diferente. Se preferir reverter para a fonte padrão do tema, clique no X à direita do nome da fonte personalizada.

Quando estiver satisfeito com as alterações, clique em Publicar ou em Salvar rascunho para continuar personalizando seu site.

O painel Fontes personalizadas com uma seta apontando para o X à direita da fonte de título personalizado para redefinir a fonte para o padrão do tema.
Clique no X ao lado de uma fonte personalizada para restaurar a fonte padrão do tema.

📌

Após salvar as fontes, pode levar alguns minutos para que elas sejam exibidas no seu blog ou site. Você também pode limpar o cache do navegador para garantir que esteja visualizando a versão mais recente do site.

Redefina as fontes

Para redefinir suas fontes para os padrões do tema, clique no X ao lado da fonte atual.

  1. Acesse Aparência → Personalizar.
  2. Clique em Fontes.
  3. Clique no X ao lado da fonte personalizada para redefini-la de volta para o padrão do tema.
  4. Clique em Salvar alterações.
a opção Fontes personalizadas com o mouse clicando no X ao lado da fonte selecionada para Títulos e Fonte base para redefinir a fonte de volta ao padrão do tema.

Aplicar uma fonte a um texto específico

Ao escolher as fontes, você verá opções para definir as fontes para o seu site no geral, não para páginas individuais ou uma frase específica do texto. Essa é uma das melhores práticas quando se trata de design: os sites possuem uma aparência melhor quando as fontes são uniformes em todo o site. Se um site tivesse um monte de fontes diferentes, poderia ficar pesado.

Se o seu objetivo é destacar uma parte do texto, considere outras formas de fazer isso, como aplicar cores diferentes, usar um bloco de citação ou inserir uma imagem.

Usar fontes personalizadas

Você pode usar um plugin que instale mais fontes no seu site. Muitos plugins permitem adicionar suas próprias fontes ao site. Ao analisar as opções, verifique as pontuações, o número de comentários positivos e o tipo de suporte que pode se esperar do desenvolvedor do plugin. Se você decidir não usar um plugin após testá-lo, não deixe de desativá-lo ou excluí-lo para manter sua lista de plugins organizada.

💡

Não sabe qual fonte escolher? Veja algumas ideias com este post sobre nove fontes cursivas gratuitas e elegantes.

Perguntas frequentes

Posso conectar uma conta do Typekit.com ao meu site do WordPress.com?

Não é possível conectar uma conta externa do Typekit.com a um site ou blog do WordPress.com.

As fontes serão exibidas em meu idioma?

Se você tiver escolhido um idioma não latino para o blog em Configurações → Geral, todos os caracteres da fonte personalizada serão carregados. Caso tenha selecionado um idioma latino, como inglês, italiano, português ou espanhol, somente um subconjunto menor de caracteres da fonte será carregado. Se alguns caracteres não estiverem sendo exibidos corretamente em seu blog, verifique primeiro as configurações de idioma para assegurar que você selecionou o idioma em que está escrevendo. Em seguida, acesse Personalizador → Fontes e salve novamente a fonte para atualizá-la para a nova configuração de idioma.

Como faço para saber se a fonte que quero usar é compatível com meu idioma?

A melhor maneira de conferir se uma fonte específica será exibida corretamente em um idioma é experimentá-la no Personalizador e ver se a fonte padrão é alterada. No momento, os idiomas asiáticos não são compatíveis, e o alfabeto cirílico está disponível na maioria das famílias de fontes. O suporte a idiomas é uma área que continuará sendo ampliada e aprimorada.

Por que é exibida uma fonte diferente por um breve momento antes de a opção escolhida aparecer?

Isso é chamado FOUT, sigla em inglês para flash de texto não estilizado. O texto é exibido primeiro na fonte padrão do tema em conexões mais lentas. Dessa maneira, as pessoas podem começar a ler seu conteúdo antes que a fonte personalizada carregue em vez de aguardar olhando para uma página em branco. Pode aparecer uma fonte diferente antes que a página termine de carregar, mas no geral isso é melhor para os leitores em conexões lentas do que ver uma tela vazia. Se não quiser que isso aconteça, você pode adicionar este código CSS ao seu site usando o editor CSS em Aparência → Personalizar → CSS adicional (somente Premium, Negócios, eCommerce e o antigo Pro):

.wf-loading body { visibility: hidden; }

ou

html:not(.wf-active) body { display: none; }

Google Fonts e GDPR

Todas as solicitações para veicular o Google Fonts usado nos temas do WordPress.com são atendidas pelos servidores do WordPress.com e não usam mais o CDN/FDN do Google. Essa mudança foi feita em dezembro de 2022.

Se o seu site usa um plugin personalizado ou um tema de terceiros, verifique com o plugin e/ou com os desenvolvedores do tema se eles não estão veiculando o Google Fonts pelo CDN/FDN do Google.

Saiba mais sobre o GDPR aqui.

Copied to clipboard!