Home » Genesis framework » Como hospedar as fontes Google localmente no tema Gênesis Sample (ou qualquer outro tema WordPress)

Como hospedar as fontes Google localmente no tema Gênesis Sample (ou qualquer outro tema WordPress)

Procurando como adicionar as fontes do Google aos temas de edição do site completo do WordPress? Clique aqui.

Você já deve ter ouvido que carregar Google Fonts a partir de servidores Google viola a GDPR. Você também deve saber que o carregamento de elementos de outros servidores pode atrasar seu site. É por isso que hoje vamos aprender como hospedar as fontes do Google localmente no WordPress.

Há várias maneiras de hospedar as fontes Google localmente no WordPress – você pode fazê-lo usando um plugin, ou hospedar as fontes Google no tema Genesis Sample sem plugins de terceiros – baixando você mesmo as fontes Google, e incluindo-as em seu tema WordPress. Eu lhe mostrarei como fazer isso de ambas as maneiras.

Como saber se as fontes do Google em seus sites são hospedadas localmente

Se você não tem certeza se seu website carrega fontes do Google local ou remotamente, você pode usar a ferramenta gratuita Google Font Checker. Você não precisará instalar nenhum plugin ou executar nenhum procedimento complicado. Basta digitar a URL de seu website no campo, e executar o teste para verificar se seu website WordPress liga para o Google para obter as fontes.

Como hospedar as fontes do Google localmente usando plugins (funciona com qualquer tema WordPress)

Se você quiser carregar Google Fonts localmente usando qualquer tema WordPress, você pode usar um plugin OMGF gratuito.

Ir para Plugins >> Adicionar Novo, e digite OMGF no campo de busca de plugins na parte superior. Instale o plugin OMGF | Hospedar o Google Fonts Localmente, e ative-o.

wordpress plugin host google fonts locally

Best WordPress hosting 2024

Na maioria dos casos, você não precisará fazer mais nada – uma vez que você abra seu site WordPress como visitante pela primeira vez após a instalação do plugin OMGF, o plugin começará a fazer o cache das fontes do Google localmente, sem qualquer necessidade de alterar qualquer configuração ou fazer qualquer outra alteração.

Se algo não funcionar como deveria, você pode sempre verificar Configurações >> Otimize a página de fontes do Google para configurações de plugins, mas na maioria dos casos você não precisa fazer nenhuma mudança lá.

wordpress local google fonts plugin

Como hospedar as fontes do Google localmente no tema Gênesis Sample sem nenhum plugin

Se você estiver usando a estrutura Genesis, você provavelmente gosta de ter seu painel de administração do WordPress o mais limpo e o mínimo possível. Como eu, na verdade.

Hospedando fontes do Google localmente no tema Gênesis Sample é um pouco mais de trabalho sem um plugin de terceiros, mas ainda não é difícil de fazer.

Primeiro – vá para Appearance >> Editor de Arquivos Temáticos, e verifique que tipos de fontes do Google serão necessárias.

Por padrão, o tema de Genesis Sample usa a família de fontes Source Sans Pro (estilos 400, 400 itálico, 600, 700). Mas se você estiver usando qualquer outra fonte do Google, o método funcionará perfeitamente para você também.

Você precisará remover a linha que começa com ‘fonts-url’ para que o Genesis não carregue a fonte do Google a partir do servidor Google.

genesis sample theme google fonts

Acesse o servidor FTP de seu site WordPress usando o Filezilla ou qualquer outro cliente FTP, e crie um novo diretório com o nome das fontes em sua instalação do WordPress (o ideal é que seja /wp-content/fonts/ diretório ).

Agora vá até a ferramenta de ajuda do Google Webfonts e procure a fonte do Google que você precisa:

  1. selecione a família de fontes à esquerda
  2. selecione charsets, estilos de fonte.
  3. Sob a janela Copiar CSS há um campo de prefixo de pasta Customize. Digite o caminho completo para sua pasta de fontes que você acabou de criar (por exemplo http://mysite.com/wp-content/fonts/).
  4. Clique no botão Baixar arquivos para baixar as fontes selecionadas do Google para seu computador.
  5. Extraia o download e faça o upload dos arquivos de fontes do Google para wp-content/fonts/ diretório que você criou antes.
  6. Copie CSS da ferramenta de ajuda do Google Webfonts – ela estará pronta para uso em seu website.
how to host google fonts locally in wordpress and genesis framework

Agora há um último passo a ser dado. Vá para Appearance >> Editor de arquivos temáticos e abra o arquivo style.css de seu tema Genesis Sample. Em seguida, cole o código CSS previamente copiado no arquivo style.css do tema. Cole-o em algum lugar no topo, antes do corpo e de outros estilos.

Para garantir que as mudanças sejam carregadas em seu navegador, altere o número da versão no topo do arquivo style.css para qualquer número maior (por exemplo, de 3.4.1 a 3.4.2) e clique em Salvar mudanças.

host google fonts locally in genesis

Uma vez feito seu tema Genesis Sample utilizará as fontes do Google hospedadas localmente em seu servidor.

Fathom analytics