Home » WordPress » Como mudar ou adicionar fonte nos últimos temas do WordPress (incluindo fontes do Google)

Como mudar ou adicionar fonte nos últimos temas do WordPress (incluindo fontes do Google)

Se você está apenas começando a usar o WordPress, ou se você nunca usou os temas do Full Site Editor (FSE) antes, você pode ficar sobrecarregado com o número de modelos, padrões e configurações que você tem em seu controle. E há uma grande chance de você nem perceber que os temas FSE têm muitas configurações de cores e fontes disponíveis para você fora da caixa.

Best WordPress hosting 2024

O ótimo é que as configurações de estilo mais usadas são bem organizadas, e você poderá encontrá-las todas em um único painel. Vamos verificar como as configurações de fontes ficam no WordPress.

Como mudar as fontes no WordPress

Para acessar as configurações de fontes nos temas do WordPress Full Site Editor, você precisa abrir o editor do site. Você pode fazê-lo acessando Appearance >> Editor no painel de administração do WordPress, ou clicando em Edit site enquanto você navega pelo seu site como visitante.

how to change font in wordpress

Quando estiver no editor do site, procure pelo ícone Styles no canto superior direito da tela.

how to change wordpress typography

Após clicar em Estilos, você verá todas as configurações globais disponíveis de estilo para seu tema atual. Clique em Typography para verificar as configurações da fonte.

how to update wordpress fonts

Os temas padrão do WordPress permitem definir diferentes fontes para texto, links, cabeçalho e botões. Clique em um deles para alterar suas configurações padrão.

Apenas um breve lembrete – se necessário, você pode substituir essas configurações em qualquer bloco enquanto estiver editando páginas ou posts. E não se preocupe em mudar as configurações globais se você tiver configurações de fonte personalizadas em mensagens já existentes. As configurações globais não irão redefinir suas fontes personalizadas.

wordpress how to change font

Ao selecionar qualquer um dos itens na seção Tipografia, você pode mudar a família de fontes, tamanho da fonte, aparência (negrito, itálico, etc.) e altura da linha.

wordpress how to change font family

Os temas devem ter várias fontes disponíveis por padrão.

wordpress changing font family

Assim que você mudar a fonte nas configurações de tipografia, você verá o resultado imediatamente. O lado esquerdo do editor do site atualizará suas fontes e quaisquer outras configurações que você estiver editando lá, mesmo antes de salvar as alterações.

change wordpress font

Uma vez que você pressionar o botão Salvar configurações de fontes do site estarão ao vivo.

Como adicionar fonte ao Editor de site completo do WordPress

Os antigos métodos de adicionar fontes diretamente ao arquivo style.css do tema, ou adicionando CSS personalizado funcionarão para os visitantes do site, mas você não poderá visualizar as páginas com a fonte correta do administrador. Portanto, não é a solução certa para os temas baseados no FSE.

A boa notícia é que o WordPress permite que você adicione facilmente fontes às configurações de temas. Para fazer isso, clique em Ferramentas >> Editor de Arquivos Temáticos no menu de administração do WordPress. Depois clique em theme.json file à direita, e verifique se há FontFamilies em código de arquivo.

Você provavelmente já notou como as diferentes fontes são definidas no tema. Para adicionar uma fonte adicional ao tema WordPress, você precisa adicionar fontFace adicional a estas configurações.

Aqui está o exemplo de como adicionar uma fonte Georgia ao tema baseado no Editor do Site Completo:

{
    "fontFamily": "Georgia",
	"name": "Georgia",
	"slug": "georgia"
},

Aqui é onde você deve adicionar o código:

how to add additional fonts to full site editor in wordpress

Assim que você adicionar a fonte, ela estará disponível para uso tanto em configurações de estilo principal, quanto em configurações de blocos personalizados também. Ela também será visualizada enquanto você edita o conteúdo de seu site.

how to add fonts to wordpress

Como adicionar a fonte do Google com poucos pesos ao Editor do site completo do WordPress

Quer adicionar alguns pesos diferentes da fonte do Google ao editor do site completo do WordPress? Você pode fazê-lo nas mesmas Ferramentas >> Editor de Arquivos Temáticos, adicionando a família de fontes com um pouco mais de detalhes.

Mas antes de adicionar uma fonte específica do Google ao WordPress você precisa fazer o download desses arquivos de fonte. Você pode usar a ferramenta de ajuda do Google Webfonts para isso. Aqui está o exemplo com a fonte Monsterrat. Primeiro selecione os pesos e estilos das fontes que você precisa:

how to download google font to your computer

Em seguida, vá até o final da página e faça o download do pacote de fontes selecionado.

download google fonts to use in wordpress theme

Extraia as fontes baixadas, e carregue-as na pasta /fonts em seu tema WordPress usando o Filezilla ou outro cliente FTP similar.

Uma vez que os arquivos estejam instalados, você precisa adicionar essa família de fontes do Google ao arquivo theme.json via Tools >> Theme File Editor.

Aqui está um exemplo que eu usei no tema Frost para adicionar vários pesos da fonte Google no WordPress. Você pode adicioná-lo logo após “fontFamilies “: [ linha:

{
					"fontFace": [
						{
							"fontFamily": "Montserrat",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "400",
							"src": [
								"file:./assets/fonts/montserrat-v25-latin-ext_latin-regular.woff2"
							]
						},
						{
							"fontFamily": "Montserrat",
							"fontStretch": "normal",
							"fontStyle": "italic",
							"fontWeight": "400",
							"src": [
								"file:./assets/fonts/montserrat-v25-latin-ext_latin-italic.woff2"
							]
						},
						{
							"fontFamily": "Montserrat",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "500",
							"src": [
								"file:./assets/fonts/montserrat-v25-latin-ext_latin-500.woff2.woff2"
							]
						},
						{
							"fontFamily": "Montserrat",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "600",
							"src": [
								"file:./assets/fonts/montserrat-v25-latin-ext_latin-600.woff2.woff2"
							]
						},
						{
							"fontFamily": "Montserrat",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "700",
							"src": [
								"file:./assets/fonts/montserrat-v25-latin-ext_latin-700.woff2.woff2"
							]
						}
					],
					"fontFamily": ""Montserrat", sans-serif",
					"name": "Montserrat",
					"slug": "montserrat"
				},

Aqui está a captura de tela:

how to add multiple weights of Google font in Full Site Editor theme's theme.json file in wordpress

É isso, você deve ser capaz de usar a fonte Google no WordPress agora, e ver como ela fica diretamente no editor do WordPress.

Se você estiver procurando por uma implementação mais simples do Google Fonts no WordPress (sem visualizá-lo no Editor), você pode verificar meu outro artigo como adicionar as fontes do Google localmente ao WordPress.

Fathom analytics