Como hospedar facilmente fontes do Google localmente no WordPress

Publicados: 2022-05-05

As fontes do Google oferecem uma ampla seleção de fontes que você pode usar em seu site e não precisa hospedá-las localmente. A maioria dos temas hoje em dia realmente tem as fontes integradas a eles. Você também pode usar um plug-in que integra as fontes do Google para adicionar as fontes ao seu site. Nesses cenários, seu site solicitará as fontes de um servidor do Google.

Neste artigo, abordaremos o que são as fontes do Google, por que você deve considerar hospedá-las localmente e também como conseguir isso em seu site WordPress.

Índice

O que são fontes do Google

Por que você deve hospedar o Google Fonts localmente

Como hospedar fontes do Google localmente

Hospedando fontes do Google localmente usando o método manual

Hospedando o Google Fonts localmente usando um plug-in

Desative o Google Fonts em seu tema

Conclusão

O que são fontes do Google

As fontes do Google são uma coleção de famílias de fontes de código aberto otimizadas para compatibilidade e de propriedade do Google.

Você pode encontrar essas fontes em fonts.google.com .

Desde a introdução dessas fontes em 2010, elas são amplamente utilizadas em sites. Verificando a análise de fontes do Google, o número total de visualizações de fontes está atualmente em 61.065.424.145.531.

Isso definitivamente significa o grande uso dessas fontes ao longo do tempo, com a fonte Roboto realmente assumindo a liderança em termos de visualizações.

Por que você deve hospedar o Google Fonts localmente

Como as solicitações de fontes do Google são feitas aos servidores do Google, se você estiver potencialmente usando várias dessas fontes em seu site, isso levará a várias solicitações aos servidores. Isso, por sua vez, fará com que seu site seja um pouco mais lento devido ao número de solicitações HTTP.

Nesses casos, ao testar seu site usando ferramentas como GTMetrix, PageSpeed ​​Insights e Pingdom, as fontes do Google provavelmente serão sinalizadas, reduzindo assim suas pontuações e tempo de carregamento.

Portanto, é considerável que você hospede as fontes necessárias em seu servidor para ajudar a reduzir o tráfego de solicitações HTTP e ajudar a aumentar o desempenho geral do site.

Além disso, é recomendável usar um CDN para o seu site se desejar hospedar suas fontes localmente. Se você não usar uma CDN, poderá causar um impacto negativo na velocidade do seu site.

Como hospedar fontes do Google localmente

A hospedagem do Google Fonts localmente em seu site WordPress é possível usando um plug-in ou manualmente. Veremos como isso é possível usando os dois métodos.

Hospedando fontes do Google localmente usando o método manual

Para hospedar essas fontes localmente usando o método manual, você precisará realizar as seguintes etapas:

1. Baixe a fonte

Para baixar o arquivo de fonte, primeiro navegue até fonts.google.com e procure a fonte desejada. Em nosso exemplo aqui estaremos usando Open Sans.

Ao identificá-lo, clique no botão “Baixar Família”.

Um arquivo zip com todos os estilos e pesos de fonte será baixado para o seu computador.

2. Extraia os arquivos

Em seguida, precisaremos extrair o arquivo zip e excluir os arquivos que não precisamos. No nosso caso, precisaremos apenas do OpenSans-Regular e do OpenSans-Bold.

3. Converta os arquivos de fonte TrueType

A fonte que temos no lugar são os formatos de fonte TrueType (TTF). Precisaremos convertê-los para o Web Open Font Format (WOFF) para compactação específica do formato.

Para conseguir isso, você pode usar uma ferramenta de sua preferência, como cloudconvert ou convertio.

Ao converter os arquivos, você pode baixar os formatos de arquivo .woff para o seu computador.

4. Acesse os arquivos do seu site no servidor e configure um diretório de fontes

Para acessar os arquivos do seu site, você precisará fazer login no seu painel de hospedagem, como o cPanel, ou usar um software de FTP, como o Filezilla.

Feito isso, crie um diretório “fontes” dentro da raiz dos arquivos do seu site, caso ainda não tenha um.

5. Carregue suas fontes do Google

Dentro do diretório “fontes” que acabamos de criar, carregue seus arquivos de fonte .woff.

6. Integre as fontes ao CSS do seu tema

Adicionar as fontes ao CSS do seu tema pode ser feito usando o método @font-face. Para fazer isso, acesse seu painel do WordPress e navegue até a seção Aparência > Personalizar > CSS Adicional.

Em seguida, adicione o código CSS abaixo na seção CSS adicional:

 @font-face { font-family: 'OpenSans-Regular'; src: url('https://yoururl/fonts/OpenSans-Regular.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSans-Bold'; src: url('https://yoururl/fonts/OpenSans-Bold.woff') format('woff'); font-weight: normal; font-style: normal; }

Você precisará substituir seuurl pelo seu URL real e a família de fontes pela família de fontes real de sua fonte. Feito isso, salve suas alterações.

7. Aplique a fonte a uma seção ou conteúdo em seu site

Para aplicar a fonte a uma seção ou conteúdo em seu site, você precisará fazer isso usando CSS personalizado. Por exemplo, você pode ter parágrafos em seu site usando a fonte adicionando o seguinte código CSS:

 p { font-family: 'OpenSans-Bold'; }

Ao acessar agora seu site, você notará que a fonte é aplicada aos seus parágrafos. Abaixo está uma captura de tela de exemplo:

Hospedando o Google Fonts localmente usando um plug-in

Neste método, recomendamos o uso do OMGF | Hospedar o plug-in do Google Fonts Localmente. Para instalar o plug-in, navegue até a seção Plugins > Adicionar novo no painel do WordPress e procure o plug-in.

Prossiga com a instalação do plugin clicando no botão “Instalar agora” e também o ative.

Feito isso, navegue até a seção Configurações > Otimizar Google Fonts.

Na guia Otimizar fontes, clique no botão “Salvar e otimizar”.

Com isso feito, suas fontes do Google agora serão hospedadas localmente.

Desative o Google Fonts em seu tema

Ao hospedar suas fontes localmente, você precisará desabilitar as fontes que foram anteriormente integradas a ela. Existem várias abordagens sobre como fazer isso, dependendo do tema que você está usando. Para alguns temas, eles terão a opção de desativar o carregamento de fontes do Google.

Um método alternativo é usar o plug-in Desativar e remover fontes do Google. O plugin pode, no entanto, não funcionar com todos os temas e plugins existentes. Na maioria dos casos, ele funcionará apenas para temas padrão do WordPress.

Em outros temas, você precisará personalizar o código do tema e remover a integração de fontes do Google. Recomendamos consultar a equipe de desenvolvimento de seus temas se esse for o seu caso.

Conclusão

Hospedar suas fontes localmente não deve ser uma tarefa complicada de implementar em seu site WordPress. Levando em consideração as vantagens de otimização e velocidade da página que vêm junto com suas fontes do Google hospedadas localmente, é definitivamente algo que precisa ser levado em consideração.