Como alterar qualquer fonte em seu tema WordPress

Cum să schimbați orice font din tema dvs. WordPress
⏱️ 4 min read

Você já quis alterar as fontes em um site WordPress? Escolher uma nova fonte com o personalizador não é difícil. O desafio surge quando você deseja usar uma fonte que não vem com o tema ou se o elemento que deseja alterar não tem opção para isso.

S-a dus în Germania să cumpere CNC
S-a dus în Germania să cumpere CNC

Alterar fontes personalizáveis

Para obter mais fontes, primeiro instale o Fontes fáceis do Google plugin para o seu site.

1. Vá para “Plugins -> Adicionar Novo.”

2. Pesquise “Easy Google Font”.

3. Clique em Instalar e depois em Ativar.

4. Agora, há mais opções de fontes em seu site. Para alterá-los, vá para o seu personalizador (Aparência -> Personalizar).

mudar-site-fontes-aparência

5. Clique em “Tipografia -> Tipografia do tema”.

alterar-site-fontes-tema-tipografia

6. Clique na seta suspensa e role para baixo. Você deve ver muito mais fontes disponíveis.

alterar-site-fontes-tema-tipografia-novo

7. Clique para selecionar o que deseja usar.

É muito simples usar o plugin para alterar o texto que já é personalizável em seu tema. A parte frustrante surge quando você deseja que um determinado trecho de texto tenha uma fonte diferente e não há lugar para alterá-lo!

Para personalizá-los, você precisa alterar o código CSS dessa parte do site. No entanto, ele está oculto, então você precisa rastreá-lo.

Obtenha as extensões

No navegador Google Chrome, procure uma extensão chamada WhatFonte, em seguida, instale-o e permita sua execução.

alterar-site-fontes-whatfont-extension

Quando ativado, WhatFont identifica qualquer fonte encontrada em qualquer site. Portanto, se você gosta de uma fonte e deseja usá-la em seu trabalho, passe o mouse sobre o texto enquanto WhatFont está em execução e ele mostrará o nome da fonte.

A próxima extensão que você precisa instalar e ativar é Firebug Lite. Ele exibe o código do seu site e permite que você edite propriedades CSS ao vivo. Esta extensão torna mais fácil encontrar e alterar as fontes, encontrando a localização do texto no código.

change-website-fonts-firebug-lite-extension

Encontre a fonte

Para descobrir o nome da fonte que seu tema está usando atualmente:

1. Ative WhatFont clicando em seu ícone

2. Passe o mouse sobre a fonte que deseja identificar.

alterar-site-fontes-identificar

3. Observe o nome da fonte.

4. Desative o WhatFont.

A próxima etapa é localizar o CSS com essa fonte no código.

1. Abra o personalizador como você fez anteriormente.

2. Abra o Firebug Lite (o ícone de um bug com uma chave de fenda).

3. Quando você ativa o Firebug, o código do site é exibido na parte inferior da tela.

Você precisa ter muito cuidado ao trabalhar com este código, especialmente se você não for um especialista em CSS. Se você seguir bem as instruções, no entanto, deverá ser capaz de alterar as fontes com bastante facilidade, sem destruir seu site. Seria uma boa ideia fazer backup do seu site antes de prosseguir.

Encontre a fonte atual do texto que deseja alterar.

1. Clique em CSS.

alterar-site-fontes-css

2. Escolha o arquivo style.css. (É um arquivo longo.)

alterar-site-fontes-inspecionar suspenso

3. Hit Ctrl + f e digite a fonte que você anotou na caixa de pesquisa.

4. Neste exemplo eu estava procurando Helvetica, e você pode ver em laranja a localização dessa fonte no CSS de estilos.

alterar-site-fontes-encontradas

4. Selecione e copie a localização da fonte. Eu destaquei em amarelo na foto acima. Se houver mais de um local listado, copie apenas um deles.

Crie um controle de fonte

Os controles de fonte informam ao plugin onde o CSS usa a fonte que deseja alterar. Esta etapa pode ser um pouco de tentativa e erro, especialmente se a fonte que você está procurando estiver em vários lugares diferentes em seu site.

1. Volte para o painel do administrador, passe o mouse sobre as configurações e clique em Google Fonts.

2. Clique em “Criar um novo controle de fonte”.

alterar-site-fontes-fonte-controle

3. Renomeie-o para descrever a localização da nova fonte.

4. Cole o local que você copiou da lista CSS na caixa de seletores CSS.

5. Clique na caixa Forçar sobreposição de estilos.

6. Salve.

Verifique-o

Volte para o seu personalizador e localize o local onde deseja que a fonte seja alterada. Encontre a caixa suspensa para o controle de fonte que você acabou de fazer. Puxe-o para baixo e selecione a fonte que deseja usar. Se funcionar com sucesso, a fonte muda assim que você clicar nela.

Se não funcionar, volte para os controles de fonte, exclua o local onde você colou e tente novamente usando um local diferente em seu CSS onde a fonte original foi listada. Lembre-se de que podem ser necessárias várias tentativas para que funcione.

Mesmo se você usar um tema comum, a capacidade de alterar qualquer fonte em seu tema WordPress dará ao seu site uma aparência única. Verifique se o seu site está atualizado corretamente e experimente.

Join our Newsletter and receive offers and updates! ✅

0 0 votes
Article Rating
Avatar of Routech

Routech

Routech is a website that provides technology news, reviews and tips. It covers a wide range of topics including smartphones, laptops, tablets, gaming, gadgets, software, internet and more. The website is updated daily with new articles and videos, and also has a forum where users can discuss technology-related topics.

You may also like...

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x