Há 1052 diferentes famílias de fontes do Google disponíveis gratuitamente (no momento da redação deste artigo). São muitas escolhas! Portanto, não é de admirar que você precise de ajuda para encontrar aquela agulha em um palheiro com uma lista das melhores fontes do Google.

Nós o encontramos para você, e também compartilharemos algumas das melhores práticas para usar o Google Fonts no WordPress.

Escolher uma fonte é mais do que uma simples escolha estética – pode ter um efeito substancial sobre as taxas de ressalto e de conversão do seu site, especialmente se você escolher uma fonte que seja difícil de ler. Portanto, compensa levar um pouco de tempo para escolher a família perfeita de fontes do Google para seu site, em vez de usar a primeira fonte que você encontrar.

Se você precisar de ainda mais fontes, veja nosso artigo em mais de 50 fontes modernas para usar em seu site WordPress.

Por que usar as fontes do Google?

Existem milhares de repositórios de fontes na internet, então o que exatamente torna as fontes do Google tão especiais?

Catálogo do Google Fonts.

Catálogo do Google Fonts.

Em primeiro lugar, é grátis! Além disso, as fontes do Google são mantidas e entregues pelo Google, o que significa que elas têm garantia de segurança. É claro que existem muitos sites duvidosos onde você pode baixar fontes gratuitas, mas quem sabe o que mais você vai pegar com esses arquivos?

A qualidade das fontes em tais sites também pode, às vezes, ser questionável.

O Google tem curadoria de uma seleção de mais de mil fontes de alta qualidade. Quando você não é um designer gráfico com um olho perfeito para a tipografia, é uma escolha mais segura.

Em segundo lugar, não há restrições complicadas de licenciamento. Todas as fontes do catálogo Google Fonts são de código aberto e gratuitas para uso em projetos comerciais. Você pode baixá-las ou incorporá-las em seu site, e pode até usá-las em projetos impressos.

Embora não haja uma licença unificada, a maioria das fontes no repositório utiliza a Open Font License.

Licença de fonte aberta.

Licença de fonte aberta.

Outras “fontes gratuitas” raramente são gratuitas e vêm com toda uma série de restrições de licenciamento confusas que poderiam aterrissar você em água quente se você cometer um erro. Infelizmente, as fontes do Google não vêm com a mesma bagagem.

E finalmente, é fácil adicionar Fontes do Google ao seu site usando a API de Fontes do Google. Alternativamente, você pode baixá-las individualmente e carregá-las para seu servidor web via FTP/SFTP.

Enquanto as fontes do Google tendem a ser simples e talvez não tão brilhantes como algumas fontes pagas, elas certamente batem as fontes seguras para a web que vêm pré-instaladas com os principais sistemas operacionais, as mesmas fontes que todos já viram milhares de vezes antes.

Há 1052 famílias diferentes de fontes Google Font disponíveis gratuitamente... você já se sente sobrecarregado? 🤯 Reduza suas escolhas com a ajuda deste artigo 👇Click to Tweet

O que procurar em uma fonte do Google

Se há uma coisa que você deve aprender ao projetar um site, é como escolher uma fonte Google adequada para seu projeto. Uma boa tipografia fará ou quebrará seu site.

Pode parecer um detalhe sem importância, mas pode ser a diferença entre alguém deixar seu site mais cedo ou ficar por perto para se tornar um leitor ou cliente fiel.

Escolher a fonte certa é algo que os designers gráficos passam anos dominando, mas mantendo alguns princípios em mente, você pode escolher uma bela fonte para seu site.

As 10 melhores fontes do Google em 2021 (De acordo com a Sabedoria das multidões)

Então, como você desenvolve uma lista das melhores fontes do Google quando tanto disto é subjetivo? Não queremos que toda esta lista seja tendenciosa, então vamos com os dados para construir uma lista das fontes mais populares do Google.

Usaremos a análise do Google Fonts para confiar na sabedoria das multidões. Com mais de 50 trilhões de vistas totais de fontes, o Google tem apenas um pouco de dados para extrair.

Então, iremos um pouco além dos números de popularidade bruta e escolheremos algumas fontes HTML que estão ganhando popularidade.

Pronto? Vamos mergulhar!

1. Roboto

Roboto.

Roboto.

A fonte de escolha da Kinsta, Roboto, é uma fonte sans-serif de Christian Robertson que o Google desenvolveu como uma fonte de sistema para Android. Agora é muito popular, vem em 12 estilos diferentes, e faz muitas aparições nas estatísticas do Google Fonts.

Por exemplo, Roboto é a fonte mais popular. Mas Roboto Condensed é também a sexta fonte mais popular, e Roboto Slab também faz uma aparição no número 12!

2. Open Sans

Open Sans.

Open Sans.

Open Sans Condensed é uma fonte altamente legível encomendada pelo Google e inspirada em seu predecessor Droid Sans. O Google usa Open Sans em alguns de seus sites e em seus anúncios impressos e na web. Open Sans Condensed, sua fonte irmã aqui, também detém o décimo terceiro lugar mais popular no Google Fonts.

3. Lato

Lato.

Lato.

Lato É outra escolha popular de Łukasz Dziedzic. Tem uma história e tanto por trás de seu projeto, equilibrando objetivos conflitantes, resultando em uma fonte sans-serif única e leve.

4. Montserrat

Monstserrat.

Monstserrat.

Montserrat é uma fonte sans-serif de Julieta Ulanovsky, que vive no bairro epônimo de Montserrat, em Buenos Aires. Com 18 estilos diferentes que vão do leve ao pesado, você tem uma grande variedade de escolha.

5. Oswald

Oswald.

Oswald.

Oswald é uma fonte sans-serif originalmente desenvolvida por Vernon Adams. Foi projetada com o distinto estilo gótico alternativo em mente, tornado evidente por seus traços ousados.

6. Source Sans Pro

Source Sans Pro.

Source Sans Pro.

Source Sans Pro é uma fonte sans-serif criada para Adobe e a primeira fonte de código aberto da Adobe. Feita por Paul Hunt, suas letras leves a tornam limpa e legível.

7. Slabo 27px/13px

Slabo.

Slabo.

Slabo é uma fonte serif desenvolvida por John Hudson da Tiro Typeworks. Esta fonte é especificamente projetada para certos tamanhos – 27px ou 13px, dependendo de suas necessidades.

8. Raleway

Raleway

Raleway

Com 18 estilos diferentes, Raleway é outra fonte sans-serif para famílias grandes, inicialmente criada por Matt McInerney. Se você gosta de Raleway e está procurando algo único, Raleway Dots oferece um estilo similar com uma abordagem pontilhada que pode funcionar para grandes manchetes.

9. PT Sans

PT Sans.

PT Sans.

O PT Sans foi desenvolvido para os tipos públicos da Federação Russa e, como tal, inclui tanto caracteres latinos quanto cirílicos. Há também várias outras fontes na família PT, incluindo algumas opções sans-serif.

10. Merriweather

Merriweather.

Merriweather.

O nome Merriweather evoca a idéia de um design agradável, e é exatamente isso que seus projetistas pretendiam. Embora não seja tão popular, Merriweather Sans é um projeto irmão que combina excepcionalmente bem com ele.

Fontes bônus + recém-chegados

Pelos números, as dez fontes acima são as fontes mais populares do Google. Mas apenas mostrar as opções mais populares faz um mau serviço às fontes mais populares que não tiveram a exposição para aparecer na analítica.

Aqui estão alguns de nossos favoritos que não apareceram no topo da analítica.

11. Noto Sans / Serif

Noto Sans / Serif.

Noto Sans / Serif.

Noto é uma fonte comissionada pelo Google que vem tanto na versão serif como na versão sans-serif. Está recebendo atualizações regulares, e agora há mais de 100 fontes de Noto, com mais chegando o tempo todo!

O objetivo de Noto é cobrir todos os alfabetos e caracteres de várias línguas, enquanto seu design distinto é harmonioso entre centenas de diferentes famílias de fontes. Estes derivados incluem o popular Noto Sans KR e Noto Sans JP.

12. Nunito Sans

Nunito Sans.

Nunito Sans.

Nunito Sans é uma opção sans-serif que está crescendo rapidamente em popularidade. Seu uso triplicou entre 2018 e 2019, e só se torna mais popular a cada ano.

13. Concert One

Concert One.

Concert One.

O Concert One é um tipo de cara arredondada e grotesca que faz uma opção estelar para manchetes. Seu design não convencional com certeza atrai os olhos.

14. Prompt

Prompt.

Prompt.

Prompt é uma oferta sans-serif da empresa tailandesa de design de comunicação Cadson Demak. Ela não tem aparência (o equivalente tailandês do sans-serif) e inclui tanto caracteres tailandeses quanto latinos.

15. Work Sans

Work Sans.

Work Sans.

Work Sans é uma fonte sans-serif otimizada para uso em telas. Os designers recomendam o uso dos estilos de peso médio para qualquer coisa entre 14px-48px.

Precisa de uma hospedagem rápida, confiável e totalmente segura para seu site WordPress? Kinsta fornece tudo isso e suporte de classe mundial 24 horas por dia, 7 dias por semana, por especialistas em WordPress. Confira nossos planos

Como criar as melhores combinações de fontes do Google

Se você achou difícil escolher uma fonte no Google Fonts, espere até tentar combiná-las em seu site! Felizmente, este não é um problema que você tenha que resolver (a menos que você queira). Há vários métodos que você pode usar para encontrar as melhores combinações de fontes do Google.

Primeiro, o próprio site do Google Fonts sugerirá emparelhamentos populares se você percorrer a página para baixo:

Descobrindo os populares pares de fontes do Google.

Descobrindo os populares pares de fontes do Google.

Além disso, você também pode usar um site como o Font Pair para obter mais sugestões.

Melhores práticas para usar as fontes do Google no WordPress

Uma vez que você encontre as fontes perfeitas para seu projeto, aqui estão algumas das melhores práticas para usar as fontes do Google no WordPress.

Limite o número de tipos da fonte que você usa

Algumas dessas fontes – como Montserrat e Raleway – vêm com 18 tipos de fontes diferentes. Embora isso seja bom para lhe dar opções, você não quer carregar todos os 18 tipos em seu site WordPress porque isso diminuirá seu tempo de carregamento.

Seguir esta diretriz é muito importante!

Para a maioria das fontes, uma boa regra geral é usar três tipos como máximo:

Muitos sites WordPress que vemos hoje em dia estão até mesmo pulando o itálico e apenas indo com dois tipos de fonte diferentes.

Se você mesmo estiver incorporando as fontes do Google, você pode escolher exatamente quais tipos incluir. Primeiro, visite uma página de fontes e depois clique em Selecionar este estilo ao lado daqueles que você deseja.

Escolhendo uma fonte no Google Fonts.

Escolhendo uma fonte no Google Fonts.

A maioria dos temas do WordPress hoje inclui maneiras fáceis de escolher quais fontes e tipos do Google você quer usar. Mas nem todos os desenvolvedores de temas estão focados no desempenho. Portanto, em alguns casos, talvez seja melhor desativar as fontes do Google em seu tema e adicioná-las você mesmo.

As fontes variáveis também estão começando a se tornar populares e são suportadas por todos os navegadores modernos. Elas são fantásticas porque permitem que um arquivo de fonte se transforme com diferentes propriedades. O Google Fonts tem muitas fontes variáveis para escolher, e você pode até mesmo restringir sua busca àquelas especificamente.

"Setting

Considere hospedar fontes do Google localmente

Como alternativa para servir as fontes a partir do servidor do Google, você também pode hospedar as fontes localmente, oferecendo benefícios de desempenho. No entanto, lembre-se que a maioria das fontes do Google provavelmente já estão em cache nos navegadores das pessoas. Portanto, recomendamos que você faça seus testes de desempenho.

Se você estiver usando uma fonte premium diferente das fontes do Google, como a fonte “Brandon” que usamos em nosso site Kinsta, hospedá-las localmente (e servi-las a partir do seu CDN) é a melhor rota. Para saber mais sobre este tópico, confira nossos artigos sobre como hospedar fontes localmente.

Escolha uma fonte que receba atualizações

As fontes são exatamente como plugins e temas do WordPress – com o tempo, elas recebem atualizações e melhorias para torná-las ainda melhores. E, embora os riscos não sejam tão ruins quanto os plugins do WordPress, ainda pode ser benéfico escolher uma fonte que receba atualizações regulares. Por exemplo, a família Noto do Google tem recebido atualizações regulares desde 2014.

Como a maioria das fontes desta lista é popular, é provavelmente uma boa aposta que qualquer fonte desta lista receberá atualizações e melhorias regulares. E se você decidir sair da lista, certificar-se de que a fonte escolhida seja popular o suficiente para chamar a atenção nunca é uma má idéia.

Não esqueça da acessibilidade

De acordo com a Organização Mundial da Saúde, e com dados coletados em 2015, estima-se que 253 milhões de pessoas vivem com deficiência visual: 36 milhões são cegas, e 217 milhões têm deficiência moderada a grave da visão. Além disso, o número de pessoas com alguma forma de deficiência aumentou para 2,2 bilhões a partir de 2021.

Ao utilizar o Google Fonts, você pode controlar a aparência com o CSS, como cor e tamanho. Portanto, não se esqueça de seguir as Diretrizes de Acessibilidade de Conteúdo da Web (WCAG) 2.0. Isso garantirá que seu conteúdo seja facilmente acessível a todos.

Seguir estas diretrizes tornará o conteúdo acessível a uma gama mais ampla de pessoas com deficiências, incluindo cegueira e baixa visão, surdez e perda auditiva, deficiências de aprendizagem, limitações cognitivas, movimento limitado, deficiências de fala, fotossensibilidade e combinações destas. – Diretrizes de Acessibilidade de Conteúdo da Web (WCAG) 2.0

Uma diretriz crítica é o contraste de cores. Nossa fonte era um pouco leve demais em um design mais antigo do site Kinsta, e os visitantes expressaram suas preocupações, pois isso tornava difícil a leitura. A última coisa que você quer fazer é publicar um conteúdo surpreendente, apenas para que ele se torne uma tensão nos olhos das pessoas!

Você pode usar uma ferramenta como o Color Contrast Checker da WebAIM para ver se suas cores de fonte passam as recomendações oficiais. Por exemplo, você pode ver que as cores em nossos artigos no blog agora passaram no teste. 👍

Ferramenta de verificação de contraste de cores.

Ferramenta de verificação de contraste de cores.

Como adicionar fontes do Google ao WordPress

Com uma ou duas fontes escolhidas, o passo final é adicioná-la ao seu site. Graças ao Google Fonts, esta tarefa é ainda mais fácil do que o normal.

Suponha que você queira obter uma fonte em seu site. Nesse caso, você tem três opções: instalar um plugin como o Easy Google Fonts ou o Google Fonts Typography, usar a API do Google Fonts para carregar a fonte em seu site, ou baixá-la manualmente e hospedá-la em seu site.

Se você precisa saber como mudar suas fontes no WordPress, nós escrevemos um guia detalhado para ajudá-lo.

Escolher uma fonte é mais do que uma simples escolha estética - pode ter um efeito substancial nas taxas de retorno e de conversão do seu site 😲 Comece aqui ⬇️Click to Tweet

Resumo

As fontes do Google são fantásticas e utilizadas por milhões de sites. Elas tornam a web mais agradável, aberta, rápida e acessível através de sólidos princípios tipográficos e iconográficos.

Para garantir uma melhor experiência geral para seus visitantes, recomendamos que você siga as melhores práticas de fontes, tais como limitar o peso das fontes, hospedar fontes localmente (se necessário), e ater-se às diretrizes de acessibilidade.

Agora, para você – quais são suas fontes e pares de fontes favoritos do Google Fonts? Informe-nos abaixo nos comentários, e não se esqueça de ler nosso guia detalhado sobre fontes do WordPress!


Economize tempo, custos e otimize o desempenho do seu site com:

  • Ajuda instantânea de especialistas em hospedagem do WordPress, 24/7.
  • Integração do Cloudflare Enterprise.
  • Alcance global com 28 centros de dados em todo o mundo.
  • Otimização com nosso monitoramento integrado de desempenho de aplicativos.

Tudo isso e muito mais em um plano sem contratos de longo prazo, migrações assistidas e uma garantia de 30 dias de devolução do dinheiro. Confira nossos planos ou entre em contato com as vendas com as vendas para encontrar o plano certo para você.