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.
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.
Quando estiver no editor do site, procure pelo ícone Styles no canto superior direito da tela.
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.
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.
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.
Os temas devem ter várias fontes disponíveis por padrão.
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.
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:
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.
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:
Em seguida, vá até o final da página e faça o download do pacote de fontes selecionado.
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:
É 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.
