Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Nota editorial: Ganhamos uma comissão de links de parceiros no WPBeginner. As comissões não afetam as opiniões ou avaliações de nossos editores. Saiba mais sobre Processo editorial.

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.

How to Host Local Fonts in WordPress for a Faster Website

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.

OMGF Settings

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.

Click the Save & Optimize Button

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.

Downloading a Google Font

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á.

Upload the Fonts to Your Website

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.

Adding Custom CSS With the Theme Customizer

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.

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.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

7 ComentáriosDeixe uma resposta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Liz S says

    Don’t you also have to make some change to the functions.PHP file to add the new fonts so they show up in the customizer?

    • WPBeginner Support says

      If you are using the manual method you would need to edit your theme’s CSS which we cover in the second method :)

      Administrador

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.