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.
Também mostraremos as práticas recomendadas para usar o Google Fonts no WordPress.
Escolher fontes é mais do que apenas uma escolha estética. A escolha de fontes particularmente difíceis de ler pode ter um impacto significativo nas taxas de rejeição e conversão do seu site. Portanto, vale a pena gastar algum tempo escolhendo a melhor família de fontes do Google para o seu site, em vez de usar a primeira fonte que 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?
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.
Outras “fontes gratuitas” raramente são realmente gratuitas e vêm com uma série de restrições confusas de licenciamento que podem lhe causar problemas se você cometer um erro.
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.
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 o seu site.
- Encaixa na sua marca: Este é provavelmente o aspecto mais importante. Os melhores sites têm fontes que mostram sua personalidade, ainda são legíveis e se ajustam ao design atual. Por exemplo, Apple e Iron Maiden usam fontes muito diferentes, mas ambas se encaixam na marca.
- Legibilidade: O segundo princípio mais crucial é a legibilidade. Uma fonte extravagante pode certamente funcionar para sua marca, mas se seus visitantes não conseguirem ler, sairão rapidamente. Portanto, suas fontes devem ser profissionais e legíveis.
- Classificação da fonte: Embora existam centenas de maneiras de classificar uma fonte, estes são os cinco tipos principais: serif, sans-serif, script, monoespaço e decorativo. Um script ou fonte serif transmite elegância, enquanto as fontes monoespaciais são populares nos sites de tecnologia. Conhecer estas classificações lhe dará um melhor ponto de partida em sua busca.
- Fonte de exibição ou fonte corporal: As fontes de exibição são destinadas a grandes formatos, cabeçalhos ou projetos de impressão. Eles podem se dar ao luxo de serem menos legíveis no interesse de um design único. A principal diretriz para as fontes corporais é a legibilidade, pois elas constituirão a maior parte do seu site.
- Humor e Intenção: Assim como qualquer trabalho artístico, os artistas projetam fontes para ambientes e ambientes específicos. A maioria das fontes virá com notas sobre como elas foram projetadas e como você pode usá-las. Utilize-as para decidir se a fonte se adequa ao seu projeto.
As 10 melhores fontes do Google em 2024
Então, como você desenvolve uma lista das melhores fontes do Google quando tanto disto é subjetivo? Não queremos que 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 visualizações totais de fontes, há muito poucos dados para extrair do Google.
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 começar!
1. 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 Condensed é uma fonte altamente legível encomendada pelo Google e inspirada em seu predecessor Droid Sans. O Google usa a fonte Open Sans em alguns de seus sites, bem como em anúncios impressos e digitais. A Open Sans Condensed, sua fonte irmã, também ocupa a décima terceira posição mais popular no Google Fonts.
3. 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
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 é 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 é 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 é 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
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 títulos.
9. 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
O nome Merriweather evoca a ideia de um design agradável, e é exatamente isso que seus designers pretendiam. Embora não seja tão popular, Merriweather Sans é um projeto que se encaixa bem.
Fontes bônus + Novas tendências
Pelos números, as dez fontes acima são as mais populares do Google Fonts. Mas mostrar apenas as opções mais populares faz uma injustiça às ótimas fontes em ascensão que ainda não tiveram a exposição necessária para aparecer nas análises.
Aqui estão algumas das nossas favoritas que não apareceram no topo das análises.
11. 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 é 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
Uma ótima opção para títulos é a fonte Concert One, que possui um tipo arredondado. Seu design incomum certamente chamará a atenção das pessoas.
14. Prompt
Prompt é uma opção sans-serif oferecida pela empresa de design de comunicação tailandesa Cadson Demak. Ela não apresenta loops (equivalente em tailandês ao sans-serif) e inclui caracteres em tailandês e latim.
15. 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.
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:
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:
- Regular
- Itálico
- Negrito
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.
A maioria dos temas de 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, sendo 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.
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) é o melhor caminho. 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 de 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 de 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á ideia.
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 2024.
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. Em um design anterior do site da Kinsta, nossa fonte era um pouco clara demais, e os visitantes expressaram suas preocupações, pois tornava difícil de ler. A última coisa que você quer é publicar um conteúdo incrível e fazer com que ele seja uma dor 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. 👍
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.
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 de WordPress!
Salman Ravoof é um desenvolvedor web autodidata, escritor, criador e grande admirador de Software Livre e de Código Aberto (FOSS). Além de tecnologia, ele se entusiasma com ciência, filosofia, fotografia, artes, gatos e comida. Saiba mais sobre ele em seu site e conecte-se com Salman no X.
Deixe um comentário