Neste artigo de ajuda do WordPress, guiarei você passo a passo pelo processo de adição de fontes personalizadas aos seus temas de bloco do WordPress. Isso significa que você pode adicionar QUALQUER fonte a QUALQUER tema, como adicionar Google Fonts ao tema Twenty Twenty Three.

Você pode assistir ao tutorial em vídeo abaixo ou pular e ler o artigo (que está disponível em vários idiomas usando os recursos de tradução nesta página). 

Mostro como realizar essa tarefa usando o plugin Create Block Theme desenvolvido diretamente pela equipe de desenvolvedores do WordPress. Isso torna o plug-in ultraleve, de alto desempenho e muito fácil de usar com temas de blocos. Também mostro como resolver um problema comum de permissão que pode ocorrer ao trabalhar com este plug-in.

Com este método, você pode vincular fontes (ou seja, vincular ao Google Fonts) ou incorporar fontes localmente em seu site (para melhor desempenho do site). Vamos entrar nisso!

Conteúdo

1. Instale o plug-in “Criar tema de bloco”

Para começar, você deve fazer login na área de administração do WordPress, que o levará ao Painel. A partir daí, vá para Plugins>Adicionar novo na navegação principal (seta vermelha na imagem acima).

Procure o plug-in “Create Block Theme” usando a barra de pesquisa no canto superior direito (destacado em verde na foto acima). Quando o plug-in Create Block Theme for exibido, clique no botão “Instalar agora” para instalá-lo em seu site (seta vermelha).

Em seguida, clique no botão “Ativar” para ativar o plugin.

WordPress simplificado: curso como construir sites poderosos, por Davies Media Design

2. Desative o plug-in de segurança (temporariamente)

Para que o restante desse processo seja executado sem problemas, você precisará desativar temporariamente todos os plug-ins de segurança instalados que bloqueiam a capacidade dos usuários de editar temas ou plug-ins.

No meu caso particular estou usando o plugin SG Security (que vem com todos os sites WordPress hospedado via Siteground – um host que eu recomendo). Eu sei que este plug-in interfere no processo de adição de fontes personalizadas, então vou desabilitar a configuração que atrapalha.

Nesse caso, navegarei até a seção “Site Security” do plug-in SG Security usando a navegação principal (seta vermelha na imagem acima).

Em seguida, rolarei para baixo até a opção "Desativar editor de temas e plug-ins" (destacada em verde na imagem acima). Você verá um botão à direita desta opção – clique no botão para desativar esse recurso (seta vermelha). Você deve ver uma mensagem de “Sucesso” aparecer na seta azul do canto direito).

Com nosso plug-in de segurança desativado temporariamente, podemos passar para a próxima etapa de seleção e upload das fontes que queremos usar em nosso site.

Existem duas opções para usar fontes personalizadas no WordPress.

3. Selecione Custom Fonts for WordPress (Linked Google Fonts)

A primeira opção é vincular a fontes em um site de terceiros, Google Fonts. Essa opção é mais simples e leva menos tempo para configurar, mas diminui a velocidade de carregamento da página do seu site. Ele também limita você às fontes disponíveis no Google Fonts (embora o Google ofereça toneladas de ótimas fontes gratuitas). Se você é menos experiente em tecnologia e não se importa em usar o Google Fonts, recomendo esta opção.

Para iniciantes, navegue até “Aparência>Gerenciar fontes do tema” na navegação principal (seta vermelha na imagem acima).

Na área de trabalho “Manage Theme Fonts”, você verá todas as fontes padrão atualmente instaladas no WordPress (destacadas em verde na imagem acima). Suas fontes também são listadas no lado direito da área de trabalho, junto com as diferentes variações de cada fonte e tamanho de arquivo para cada variação de fonte (destacado em azul).

Para adicionar uma nova fonte ao seu tema, clique no botão "Adicionar fonte do Google" (seta vermelha).

Clique no menu suspenso "Selecionar fonte" e procure a fonte do Google que deseja adicionar ao seu site (as fontes estão em ordem alfabética). Se você não tem certeza da aparência de cada fonte, recomendo navegando no site do Google Fonts para explorar as fontes e testá-las. Depois de encontrar a fonte que deseja usar, selecione-a no menu suspenso (seta azul).

Agora você verá uma lista de todas as variantes disponíveis que você pode instalar em seu tema para essa fonte. Você pode marcar a caixa ao lado de variantes individuais ou clicar na caixa de seleção superior (seta vermelha na imagem acima) para selecionar todas as variantes. Você verá uma lista de suas variantes selecionadas, juntamente com o tamanho do arquivo, no lado direito da tela. Quando estiver pronto, clique em “Adicionar fontes do Google ao seu tema” (seta verde).

Agora você deve ver uma mensagem na parte superior da área de trabalho informando que a fonte foi instalada em seu tema (neste caso, no tema Twenty-Twenty Three). Você pode clicar no link “Gerenciar fontes” dentro da caixa de mensagem de sucesso ou clicar na pequena seta para trás (seta vermelha na imagem acima) para retornar à área de trabalho “Gerenciar fontes do tema”.

Agora você verá sua família de fontes recém-instalada listada com o restante das fontes do seu tema (seta vermelha na imagem acima). Você também verá sua família de fontes e todas as variações de fontes associadas no lado direito da área de trabalho (destacadas em verde).

4. Incorpore fontes personalizadas para WordPress (fontes locais para melhor SEO)

A segunda opção para adicionar fontes ao seu site WordPress é “incorporar” ou “hospedar localmente” suas fontes. Em outras palavras, seus arquivos de fonte estarão localizados dentro do mesmo servidor web que hospeda seu site.

O benefício desse método é que ele não requer a recuperação de fontes de um domínio de terceiros. Como resultado, suas fontes carregam mais rápido e, portanto, sua página da web carrega mais rápido. O carregamento mais rápido de páginas da Web é melhor para a experiência do usuário, o que significa que pode ajudar seu site a ter uma classificação mais alta nos mecanismos de pesquisa e obter mais tráfego.

Em outras palavras, as fontes incorporadas são melhores para SEO (otimização de mecanismo de pesquisa).

Embora esse método exija algumas etapas extras, ainda é bastante fácil e usa o mesmo plug-in que instalamos anteriormente (plug-in Create Block Themes).

Para instalar suas fontes localmente, comece navegando até Aparência>Gerenciar fontes de tema na navegação principal (se você ainda não estiver lá desde a última etapa - seta azul na imagem acima). Em seguida, clique no botão “Adicionar fonte local” no canto superior direito da área de trabalho (seta vermelha).

Você será direcionado para a área “Fontes locais”, onde poderá selecionar um arquivo do seu computador para enviar para o seu tema. Abaixo do botão "Escolher arquivo", você verá uma lista dos formatos de arquivo de fonte suportados. Você pode obter esses formatos em qualquer site de fonte confiável, incluindo o Google Fonts.

Encontre e baixe sua fonte preferida no Google Fonts

Vou até o Google Fonts e uso a barra de pesquisa (seta vermelha) para procurar a fonte que desejo – neste caso, a fonte “Catamaran”. Depois que a fonte estiver listada nos resultados, clicarei nela para visualizar a página da fonte (seta verde).

Em seguida, clicarei no botão “Baixar família” para baixar esta fonte e todas as suas variações para o meu computador. Você pode rolar para baixo na página da fonte se quiser ver todas as variações disponíveis para essa fonte.

Clique em “Salvar” para salvar o arquivo zip da fonte em seu computador.

Descompacte sua pasta de fontes para acessar os arquivos de fontes

Quando o download terminar, clique na seta ao lado do download concluído (seta vermelha) e clique em “Mostrar na pasta” (seta verde).

Clique com o botão direito do mouse no arquivo zip em seu explorador de arquivos e clique em "Extrair tudo".

Uma janela pop-up será exibida, mostrando onde as fontes estão sendo extraídas (seta vermelha). Você pode alterar esse local, se desejar, caso contrário, clique no botão "Extrair" (seta verde). Isso descompactará a pasta e criará um novo arquivo em seu computador com todos os arquivos de fonte descompactados. Esta pasta deve abrir automaticamente.

Se você baixou arquivos de fonte usando o Google Fonts, entre na pasta "estática" para visualizar todos os seus arquivos de fonte. Caso contrário, basta procurar por qualquer arquivo que seja OTF, TTF, WOFF ou WOFF2.

Dentro desta pasta “estática” você verá uma lista de todas as variações de fonte que baixamos para a fonte Catamaran do Google Fonts. Existem 9 variações no total, e podemos enviar todas elas para o nosso site ou apenas as variações que queremos/precisamos. Clique no local da pasta no explorador de arquivos (seta verde), clique com o botão direito do mouse e selecione “Copiar”.

Carregue suas fontes personalizadas para o WordPress

Navegue de volta ao WordPress, onde você tem a área de trabalho “Fontes locais” aberta. Clique no botão “Escolher arquivo” (seta vermelha na imagem acima) para selecionar suas fontes. Você pode navegar manualmente até o local em seu computador onde suas fontes estão armazenadas. Ou simplesmente clique na barra de endereço do explorador de arquivos (seta azul), exclua o endereço que está lá, clique com o botão direito do mouse e selecione “Colar” (seta verde). Isso colará o endereço que você copiou na etapa anterior. Aperte a tecla enter e você será levado para a pasta com suas fontes.

Você tem que carregar suas variações de fonte uma de cada vez. Para este exemplo, simplesmente carregarei a variação da fonte “Catamaran-Regular” clicando nela (seta verde) e, em seguida, clicando no botão “Abrir” (seta vermelha).

Agora você deve ver as informações de “NOME DA FONTE”, “ESTILO DA FONTE” e “PESO DA FONTE”, bem como uma visualização da fonte no lado direito. Clique em “Carregar fonte para o seu tema” (seta vermelha) para carregar a variação da fonte.

Veja suas fontes de tema personalizadas

Agora você deve ver uma mensagem de sucesso na parte superior da área de trabalho (destacada em verde na imagem acima). Parabéns – sua fonte personalizada agora está carregada em seu tema como uma fonte local! Você pode continuar clicando em “Escolher arquivo” e carregar quantas variações de fonte desejar.

Quando terminar, clique no link “Gerenciar fontes” dentro da caixa de mensagem de sucesso ou na seta para trás (indicada pela seta vermelha) para retornar à área de trabalho Gerenciar fontes de tema.

Agora você verá a nova família de fontes “Catamaran” listada com o restante das famílias de fontes do seu tema (seta vermelha). Além disso, você verá a família de fontes e quaisquer variações instaladas no lado direito da janela Gerenciar fontes do tema (destacada em verde).

5. Altere as fontes do seu tema para suas fontes personalizadas

Agora que você instalou suas novas fontes, é hora da parte divertida!

Para alterar as fontes do seu tema para suas fontes personalizadas, navegue até o Editor do Site indo até Aparência>Editor (seta vermelha na imagem acima).

Clique em qualquer lugar dentro da área de conteúdo principal (seta vermelha) do Editor do Site para abrir os controles.

No Menu Superior, clique no ícone “Estilos” (seta azul). Em seguida, clique em “Tipografia” (seta vermelha).

Em “Elementos” você pode alterar a fonte do texto, links, cabeçalhos ou botões. Vou selecionar a opção “Títulos” para este exemplo.

Agora você verá um menu suspenso em “Tipografia”, onde poderá selecionar qualquer uma das fontes do tema (seta vermelha). Você pode ver as fontes “Neuton” e “Catamaran” que adicionei para este tutorial listadas aqui. Vou selecionar “Neuton” para minha fonte de título.

Clique no botão "Salvar" no canto superior direito para salvar suas alterações.

Clique em “Salvar” mais uma vez (seta vermelha) e sua fonte personalizada agora será salva para todos os cabeçalhos do site!

Em seguida, você pode clicar no link Visualizar>Visualizar site no canto superior direito do editor do site (setas vermelhas na foto acima) para ver como seu site se parece com sua nova fonte. Retorne ao Editor do Site e repita este processo para quaisquer outros elementos cuja fonte você deseja personalizar.

Para retornar à área de administração do WordPress, clique no logotipo no canto superior esquerdo do editor do site (seta verde) e clique no logotipo novamente.

6. Como excluir fontes personalizadas do WordPress

Para excluir qualquer uma de suas fontes personalizadas, comece navegando de volta para Aparência>Gerenciar fontes de tema.

Você pode excluir toda a família de fontes passando o mouse sobre o lado direito do nome da família de fontes e clicando no ícone da lixeira que aparece (seta azul). Ou passe o mouse sobre as variações de fonte individuais e clique no ícone da lixeira (as variações de fonte estão localizadas dentro da área destacada em verde). Você também pode clicar no link “Remover família de fontes” para excluir qualquer família de fontes (seta roxa).

É isso neste tutorial! Se você gostou, pode conferir meus outros Artigos de ajuda do WordPress ou inscreva-se no meu Masterclass WordPress na Udemy.

Boletim informativo por e-mail de aplicativos criativos gratuitos da Davies Media Design

Assine o boletim informativo DMD

Inscreva-se para receber novos tutoriais, atualizações de cursos e as últimas notícias sobre seus aplicativos criativos gratuitos favoritos!

Você se inscreveu com sucesso!

Pin It on Pinterest