Como hospedar fontes locais no WordPress para um site mais rápido

Uma bela tipografia pode melhorar o design de seu site e cativar seu público. Porém, como especialistas em desempenho do WordPress, descobrimos que depender de serviços de fontes de terceiros pode tornar seu site mais lento, prejudicando a experiência do usuário e potencialmente prejudicando seu SEO.

A solução é hospedar as fontes localmente. Ao assumir o controle dos arquivos de fontes, seu site pode ignorar essas etapas extras de carregamento, garantindo um site extremamente rápido com melhor experiência do usuário e SEO.

Neste artigo, mostraremos como hospedar fontes locais no WordPress, permitindo que você aprimore a tipografia do seu site e, ao mesmo tempo, mantenha o desempenho ideal.

Por que hospedar fontes localmente no WordPress?

Embora a tipografia e as fontes personalizadas possam melhorar a estética geral do site, elas têm um impacto negativo no desempenho do WordPress. Por exemplo, se você estiver usando uma fonte personalizada do Google Fonts, ela será carregada de serviços de terceiros, o que tornará seu site mais lento.

Felizmente, há uma maneira de usar fontes personalizadas sem tornar seu site mais lento. Uma nova API de Webfonts foi introduzida no WordPress 6.0. Isso permite que você hospede fontes localmente para que elas carreguem mais rapidamente.

Outro motivo para hospedar o Google Fonts localmente é manter a conformidade com o GDPR. Essa é uma consideração legal importante se você tiver visitantes de sites da União Europeia.

Quando alguém visita um site que usa o Google Fonts, seu endereço IP é registrado pelo Google quando as fontes são carregadas. Como isso é feito sem a permissão do usuário, a UE agora considera isso uma violação das normas de privacidade, e você pode ser responsabilizado por danos.

Dito isso, vamos dar uma olhada em como hospedar fontes locais no WordPress para ter um site mais rápido. Abordaremos dois métodos, sendo que o primeiro é recomendado para a maioria dos usuários.

Método 1: Hospedagem de fontes locais no WordPress com um plug-in

A primeira coisa que você precisa fazer é instalar e ativar o plug-in OMGF (Optimize My Google Fonts). Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

O OMGF é um dos melhores plug-ins de tipografia para WordPress. Ele oferece uma maneira fácil para iniciantes de melhorar o desempenho e a conformidade com o GDPR, hospedando o Google Fonts localmente.

Após a ativação, você precisa acessar Settings ” Optimize Google Fonts para configurar o plug-in. Você deve estar vendo a guia “Optimize Fonts” (Otimizar fontes).

Observe a declaração sob o título “Otimizar fontes do Google” de que você só precisa usar as configurações padrão para substituir automaticamente suas fontes do Google por cópias hospedadas localmente.

Isso significa que, ao rolar a página de configurações para baixo, tudo o que você precisa fazer é certificar-se de que a “Opção de exibição de fonte” tenha a configuração padrão de “Trocar (recomendado)” selecionada.

Tudo o que você precisa fazer agora é clicar no botão “Save & Optimize” (Salvar e otimizar) na parte inferior da página.

Você verá uma mensagem na parte superior da tela que diz “Optimization completed successfully” (Otimização concluída com êxito).

Parabéns! Suas fontes do Google Fonts agora estão hospedadas localmente. Seu site carregará mais rápido e você reduziu o risco de processos judiciais europeus.

Método 2: Hospedagem manual de fontes locais no WordPress

Você também pode hospedar fontes localmente sem usar um plug-in, usando o método @font-face do nosso guia sobre como adicionar fontes personalizadas no WordPress. Embora esse método exija mais trabalho, ele permite que você use qualquer fonte que desejar em seu site.

Você precisa fazer o download das fontes que deseja usar em um formato da Web. Há muitos lugares para encontrar ótimas fontes gratuitas para a Web, como Google Fonts, Typekit, FontSquirrel e outros.

Se você não tiver o formato da Web para sua fonte, poderá convertê-la usando o gerador FontSquirrel Webfont.

Agora você precisa armazenar as fontes no seu servidor de hospedagem do WordPress. Você pode carregar os arquivos usando o FTP ou o Gerenciador de arquivos do cPanel do seu host.

Você deve criar uma nova pasta chamada “fonts” no diretório do seu tema ou tema filho e carregá-la lá.

Depois de fazer o upload da fonte, você precisa carregá-la na folha de estilo do tema usando CSS personalizado. Você pode adicionar o código diretamente ao arquivo style.css do seu tema ou usar a seção Additional CSS do personalizador de temas.

Você pode fazer isso usando uma regra CSS3 @font-face como esta:

@font-face {
    font-family: Arvo;
    src: url(http://example.com/wp-content/themes/twentytwentyone/fonts/Arvo-Regular.ttf);
    font-weight: normal;
}

Não se esqueça de substituir a família da fonte e o URL por seus próprios.

Depois disso, você pode usar essa fonte em qualquer lugar na folha de estilo do seu tema ou na seção Additional CSS do personalizador de temas. O CSS usado dependerá do seu tema e de onde você deseja usar a fonte local. Aqui está um exemplo de nosso site de demonstração:

h1 {
font-family: Arvo, Arial, sans-serif;
}

Como você pode ver, nosso cabeçalho agora está usando a fonte Arvo hospedada localmente.

Guias especializados sobre fontes no WordPress

Agora que você sabe como hospedar fontes locais, talvez queira ver alguns outros guias relacionados ao uso de fontes no WordPress.

• O que é uma fonte segura para a Web + 19 melhores fontes seguras para a Web
• Como alterar as fontes em seu tema do WordPress (maneiras fáceis)
• Como alterar facilmente o tamanho da fonte no WordPress
• Como adicionar fontes personalizadas no WordPress
• Como tornar o Google Fonts compatível com a privacidade
• Como desativar o Google Fonts em seu site WordPress
• Como adicionar facilmente fontes de ícones em seu tema do WordPress
• Melhores plug-ins de tipografia do WordPress para aprimorar seu design

Esperamos que este tutorial tenha ajudado você a aprender como hospedar fontes locais no WordPress para ter um site mais rápido. Talvez você também queira ver nosso guia sobre como aumentar o tráfego do seu blog ou nossa seleção de especialistas de plug-ins obrigatórios do WordPress para expandir seu site.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.