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.

Mostro como realizar essa tarefa usando o plugin Create Block Theme desenvolvido diretamente pela equipe de desenvolvedores do WordPress. Isso torna o plugin ultraleve, de alto desempenho e muito fácil de usar com temas de bloco.

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!

Vídeo: Adicione fontes personalizadas ao WordPress

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

Navegue até Plugins>Adicionar novo para adicionar um plug-in WordPress

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).

Pesquise "Criar tema de bloco" e clique em "Instalar agora"

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).

Ative o plug-in Criar tema de bloco

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.

Navegue até Segurança SG> Segurança do Site

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

Desative a opção Desativar editor de temas e plug-ins

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.

Navegue até Aparência>Gerenciar fontes do tema

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

Fontes de tema WordPress existentes são exibidas nesta página, clique em Adicionar fontes do Google

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).

Selecione uma fonte do Google no menu suspenso

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).

Visualize e selecione variantes de fontes do Google e clique em "Adicionar fontes do Google ao seu tema"

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).

Clique na seta para trás depois que a fonte personalizada for adicionada ao WordPress

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”.

A fonte personalizada instalada e suas variantes agora serão exibidas no WordPress

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).

Clique em “Adicionar fonte local” para fazer upload de fontes do seu computador para o seu site WordPress

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).

Clique em "Escolher arquivo" para fazer upload do arquivo de fonte personalizado

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

Visite o site do Google Fonts para procurar uma fonte personalizada

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).

Clique em Baixar família para baixar a fonte do Google para o seu computador

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.

Selecione um local de download para sua fonte personalizada e clique em "Salvar"

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

Descompacte sua pasta de fontes para acessar os arquivos de fontes

Veja sua fonte baixada no explorador de arquivos

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 no arquivo zip da sua fonte e selecione "Extrair tudo"

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

Escolha um local de download para os arquivos de fontes extraídos

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.

Clique duas vezes na pasta “estática” para visualizar todas as variantes de fontes personalizadas

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.

Copie o local do arquivo das variantes de fonte na barra superior do explorador de arquivos

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

No WordPress, clique em “Escolher arquivo” e cole o local do arquivo de suas variantes de fonte

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.

Selecione as variantes de fonte desejadas e clique em Abrir

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).

Clique em Carregar fonte para o seu tema para adicionar fontes personalizadas ao WordPress

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

Clique no botão Voltar assim que as fontes personalizadas do WordPress forem carregadas localmente para o seu tema

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.

Sua nova fonte aparecerá junto com suas variantes na página Gerenciar fontes do 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!

Navegue até Aparência> Editor para alterar as fontes do seu tema

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 na área de conteúdo principal para acessar o Editor do Site WordPress

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

Clique no ícone Estilos no menu superior do Editor de blocos e clique em Tipografia

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

Clique na opção Títulos para adicionar fontes de títulos personalizadas

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.

Selecione sua fonte WordPress personalizada no menu suspenso

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" para salvar suas fontes personalizadas do tema WordPress

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

Clique em visualizar no menu superior do bloco e clique no link Visualizar site para visualizar as fontes

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

Vá para Aparência> Gerenciar fontes do tema para excluir fontes personalizadas

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

Clique no link "Remover família de fontes" no menu suspenso da sua fonte WordPress personalizada

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!