Como Hospedar Fontes Locais no WordPress para um Site Mais Rápido

Uma tipografia bonita pode melhorar o design do seu site e cativar seu público.

Mas, ao melhorar o desempenho do nosso site, descobrimos que depender de serviços de fontes de terceiros pode deixar o WordPress mais lento, prejudicando a experiência do usuário e potencialmente seu SEO.

Encontramos algumas maneiras de evitar esse problema. Uma solução é hospedar as fontes localmente.

Ao assumir o controle dos seus arquivos de fontes, seu site pode pular 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 enquanto mantém o desempenho ideal.

Por que Hospedar Fontes Localmente no WordPress?

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

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

Outro motivo para hospedar Google Fonts localmente é para estar em conformidade com o GDPR. Essa é uma consideração legal importante se você tiver visitantes do site da União Europeia.

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

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

1. Hospedando Fontes Locais no WordPress Com um Plugin
2. Hospedando Fontes Locais no WordPress Manualmente
3. Guias de Especialistas sobre Fontes no WordPress

Método 1: Hospedando Fontes Locais no WordPress Com um Plugin

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

OMGF é um dos melhores plugins de tipografia do WordPress. Ele oferece uma maneira amigável para iniciantes de melhorar o desempenho e a conformidade com o GDPR, hospedando Google Fonts localmente.

Após a ativação, você precisa visitar Configurações » Otimizar Google Fonts para configurar o plugin. Você deve estar na aba ‘Otimizar Fontes’.

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

Isso significa que, ao rolar a página de configurações, tudo o que você precisa fazer é garantir que a ‘Opção de Exibição de Fonte’ tenha a configuração padrão de ‘Swap (recomendado)’ selecionada.

Tudo o que você precisa fazer agora é clicar no botão ‘Salvar e Otimizar’ na parte inferior da página.

Você verá uma mensagem na parte superior da tela dizendo ‘Otimização concluída com sucesso.’

Parabéns! Suas 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: Hospedar Fontes Locais no WordPress Manualmente

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

Você precisa baixar as fontes que deseja usar em um formato web. Existem muitos lugares para encontrar ótimas fontes web gratuitas, como Google Fonts, Typekit, FontSquirrel, e mais.

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

Agora você precisa armazenar as fontes em seu servidor de hospedagem WordPress. Você pode enviar os arquivos usando FTP ou usando o Gerenciador de Arquivos do cPanel do seu provedor.

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

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

Você pode fazer isso usando uma regra @font-face do CSS3 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 pelos seus.

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

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

Como você pode ver, nosso título agora está usando a fonte Arvo hospedada localmente.

Guias de Especialistas sobre Fontes no WordPress

Esperamos que este tutorial tenha ajudado você a aprender como hospedar fontes locais no WordPress para um site mais rápido. Você também pode querer ver outros guias relacionados ao uso de fontes no WordPress:

• O que é uma Fonte Web Segura + 19 Melhores Fontes Web Seguras
• Como Alterar Fontes no Seu Tema WordPress (Maneiras Fáceis)
• Como Alterar Facilmente o Tamanho da Fonte no WordPress
• Como Adicionar Fontes Personalizadas no WordPress
• Como Tornar as Fontes do Google Amigáveis à Privacidade
• Como Desativar Fontes do Google em Seu Site WordPress
• Como Adicionar Facilmente Fontes de Ícones no Seu Tema WordPress
• Melhores Plugins de Tipografia para WordPress para Melhorar Seu Design

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