Como hospedar fontes do Google localmente no WordPress 2023

Atualizado em 15 de noviembre de 2023

Hospedar feeds localmente pode ser complicado para usuários regulares do WordPress, mas oferece grandes vantagens em termos de desempenho. Felizmente, existe uma maneira fácil de acomodar Fontes do Google localmente no WordPress o que tornará seu site mais rápido e eficiente.

Ao criar um site, um dos fatores mais importantes a considerar é o tipo de fonte que você usará. As fontes podem ajudar a definir o tom do seu site e podem ser fundamentais para atrair visitantes. O Google Fonts é um ótimo recurso para encontrar fontes para o seu site.

Este artigo fornecerá as instruções passo a passo necessárias para hospedar o Google Fonts localmente. Feito isso, você poderá aproveitar a grande seleção de fontes disponibilizadas pelo Google sem sacrificar a velocidade do seu site.

Mas antes de mergulharmos no processo passo a passo, vamos primeiro entender o que são as fontes do Google e por que são tão populares. Então, vamos mergulhar.

O que são fontes do Google?

Fontes do Google é um biblioteca online de fontes gratuitas Código aberto desenvolvido pelo Google. Foi lançado em 2010 com o objetivo de deixar a web bonita e rápida por meio de uma ótima tipografia. Desde então, tornou-se uma das fontes de fontes mais populares da web.

Além de fornecer uma biblioteca de fontes, o Google Fonts também oferece ferramentas para ajudá-lo a personalizar as fontes de acordo com sua preferência. Você pode alterar o tamanho da fonte, a altura da linha e o espaçamento entre letras, bem como adicionar efeitos como sombras projetadas, contornos e sombras de texto.

No entanto, existem algumas desvantagens em usar o Google Fonts. Por um lado, eles podem diminuir a velocidade de carregamento do seu site porque a fonte é fazer upload dos servidores do Google em vez de seu próprio servidor . Isso pode impactar negativamente a experiência do usuário. Além disso, o Google Fonts está disponível apenas em determinados formatos e nem todos os navegadores suportam todos os formatos.

Felizmente, existe uma maneira de contornar esses inconvenientes. Ao hospedar as fontes localmente, você pode garantir que seu site carregue rapidamente e que as fontes possam ser acessadas por todos os navegadores. Vamos dar uma olhada em outros benefícios de hospedar o Google Fonts localmente.

Vantagens de hospedar o Google Fonts localmente

Existem várias vantagens em hospedar o Google Fonts localmente.

Por exemplo, isso tornará seu site mais rápido e eficiente. Em vez de carregar fontes dos servidores do Google, seu site poderá carregá-las de seu próprio servidor. Isso reduzirá o tempo de carregamento do seu site e facilitará o acesso das fontes aos visitantes.

Além disso, hospedar fontes localmente as disponibilizará em todos os navegadores, pois a fonte será armazenada em seu servidor.

Além disso, hospedar as fontes localmente lhe dará mais controle sobre como eles são usados ​​em seu site. Isso ocorre porque as fontes são armazenadas em seu próprio servidor e podem ser ajustadas conforme necessário. Por exemplo, se você quiser experimentar diferentes tamanhos ou estilos de fonte, poderá fazê-lo sem precisar alterar o código do seu site. Essa flexibilidade pode ser inestimável na criação de um site.

Finalmente, hospedar fontes localmente reduzirá sua dependência de serviços de terceiros . Ao hospedar as fontes em seu próprio servidor, você não precisará se preocupar em depender dos servidores do Google para entregar as fontes aos visitantes. Isso pode ser benéfico por motivos de segurança e confiabilidade.

Agora que você conhece os benefícios de hospedar o Google Fonts localmente, vamos dar uma olhada em como fazer isso no WordPress.

Você pode hospedar o Google Fonts localmente no WordPress de duas maneiras.

  • Use um plugin dedicado
  • A mão

Aqui, apresentaremos os dois métodos. Assim, você pode selecionar o método que melhor atende às suas necessidades.

1. Hospede fontes do Google localmente usando um plug-in

A maneira mais fácil de hospedar Google Fonts localmente no WordPress é usar um plug-in. Existem vários plug-ins disponíveis que podem ajudá-lo. Para esta demonstração, usaremos o plug-in OMFG (Optimize my Google Fonts).

como-hospedar-google-fonts-localmente-no-wordpress

Este plug-in Meu Deus | Compatível com GDPR/DSGVO, fontes do Google mais rápidas Isso torna mais fácil selecionar as fontes que você deseja usar e, em seguida, baixá-las e hospedá-las automaticamente em seu servidor.

Vamos começar instalando e ativando o plugin Optimize my Google Fonts.

1.1 Instale e ative o plug-in Optimize My Google Fonts

Para instalar o plugin, vá para plug-ins > Adicionar novo em seu painel do WordPress. Procure o plug-in no repositório de plug-ins do WordPress usando as palavras-chave do plug-in ” Meu Deus, meu Deus “.

Clique em ‘ Instale agora’ quando você localiza o plug-in nos resultados da pesquisa. Após a instalação, para habilitar o Plugin em seu site, clique no botão ‘ Ativar’ .

1.2 Definir configurações do plug-in OMFG

Depois de concluir a ativação, vá para Configurações > Otimizar fontes do Google .

Na guia Fontes locais, se você rolar até o final, verá um botão ” Economize e otimize “. Suas fontes do Google agora serão hospedadas localmente depois que você clicar nesse botão.

salvar e otimizar-omgf

Agora, para verificar se o plugin funcionou ou não, você pode simplesmente usar uma ferramenta como ‘sicher’, que é uma ferramenta online gratuita de verificação de fontes. Embora a interface esteja em alemão, é fácil de entender.

Basta digitar o URL do seu site na caixa de texto. Se tudo estiver em ordem, você receberá uma notificação verde. Caso contrário, se o Plugin não estiver funcionando corretamente no seu site, você receberá um grande alerta vermelho. Além disso, antes de usar esta ferramenta, certifique-se de desligar o modo de teste OMGF.

ferramenta segura do google-fonts-checker

E aí está. Estas instruções simplificam a hospedagem do Google Fonts localmente no WordPress usando um plug-in.

2. Hospedar manualmente o Google Fonts no WordPress

Nesta seção, veremos como podemos hospedar Google Fonts no WordPress manualmente. Este método é ótimo para você se não quiser instalar plug-ins de terceiros.

Mas antes de começar, sugerimos fortemente que você faça um copia de segurança do seu site antes de continuar o processamento para que você não perca o seu site em caso de complicações.

2.1 Baixe o arquivo do Google Fonts

Você deve primeiro visitar fonts.google.com e realizar uma pesquisa de fontes antes de fazer download do arquivo de fonte. Montserrate será usado neste exemplo.

Depois de encontrar a fonte de sua escolha, selecione ” Baixar família » no menu.

host-google-fonts-localmente-no-wordpress

Toda a coleção de espessuras e estilos de fontes será baixada para o seu computador como um arquivo zip.

2.2 Extraia os arquivos baixados

Agora vá para a pasta de download e abra o arquivo zip que contém a família de fontes. Aqui, você pode manter os arquivos de fontes necessários e excluir o restante das outras fontes. No nosso caso, mantemos Montserrat-Regular, Montserrat-Bold e Montserrat-Italic.

arquivo zip de origem

2.3 Converter formato de fonte

Nossas fontes instaladas pertencem ao Família de fontes TrueType (TTF) . Para compactação específica de formato, eles devem ser convertidos para formato de código aberto da web (WOFF ).

Você pode usar uma ferramenta de sua escolha, como transfonter ou convertio, para converter tipos de arquivos de fontes.

ferramenta online-font-face-generator-transfonter

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

2.4 Carregar fontes para o servidor

Em seguida, para hospedar o Google Fonts localmente, você precisa fazer upload das fontes para o seu servidor WordPress. Para fazer isso, usando um programa FTP como FileZilla qualquer cPanel navegue até a raiz dos arquivos do seu site que contêm wp-inclui e wp-admin .

host-google-fonts-localmente-no-wordpress

Você pode então criar um novo diretório e nomeá-lo “fonte” se ainda não tiver um. Depois disso, carregue os arquivos de fonte ‘woff’ convertidos para o diretório ‘source’.

2.5 Vincule novas fontes ao CSS no WordPress usando font-face

Depois de enviar os arquivos de fontes para o seu servidor, você precisa usar @Tipo de letra para incluir as fontes no CSS do seu site. Quase todos os Temas WordPress Eles vêm com um painel CSS personalizado. Caso seu tema não venha com uma seção CSS adicional, você pode usar um plugin gratuito como Simple Custom CSS.

Agora para adicionar o código personalizado, vá para a área Aparência > Personalizar > CSS adicional no painel do WordPress e cole os scripts CSS na seção CSS adicional.
css-para-adicionar-google-fonts-localmente

certifique-se de substituirseuurl ‘ com seu URL real e família de fontes com a família de fontes real da fonte escolhida. Em seguida, salve as alterações.

Finalmente, você precisará modificar seu arquivo estilos.css para fazer referência à nova família de fontes. Aqui usamos o CSS para o corpo do texto usando a fonte Montserrat Regular.

Cole o código a seguir logo abaixo de onde adicionamos os scripts personalizados.
body {família da fonte: ‘Montserrat-Regular’, Arial, sans-serif;}
Como resultado, você verá que seus parágrafos têm a fonte quando visitar o site deles agora. Aqui está um exemplo como captura de tela abaixo:

visualização da fonte

E isso é. Com essas etapas simples e fáceis, você pode hospedar manualmente o Google Fonts localmente em seu site WordPress.

Conclusão

Hospedar Google Fonts localmente no WordPress pode ser uma ótima maneira de melhorar a velocidade e a confiabilidade do seu site. Também oferece mais controle sobre as fontes que você usa, pois você pode ajustá-las conforme necessário.

Neste artigo, aprendemos as vantagens de hospedar fontes localmente. Aprendemos dois métodos fáceis para hospedar Google Fonts localmente no WordPress, incluindo usar um plug-in ou fazê-lo manualmente. Seja qual for o método escolhido, hospedar o Google Fonts localmente pode ser uma ótima maneira de aproveitar as vantagens da grande seleção de fontes fornecida pelo Google.

Esperamos que este artigo tenha ajudado você a hospedar suas fontes do Google localmente. Se sim, deixe-nos saber na seção de comentários qual método você prefere.

Scroll al inicio