Escolher fontes \u00e9 mais do que apenas uma escolha est\u00e9tica. A escolha de fontes particularmente dif\u00edceis de ler pode ter um impacto significativo<\/a> nas taxas de rejei\u00e7\u00e3o<\/a> e convers\u00e3o<\/a> do seu site. Portanto, vale a pena gastar algum tempo escolhendo a melhor fam\u00edlia de fontes do Google para o seu site, em vez de usar a primeira fonte que encontrar.<\/p>\n Se voc\u00ea precisar de ainda mais fontes, veja nosso artigo em mais de 50 fontes modernas para usar em seu site WordPress<\/a>.<\/p>\n Existem milhares de reposit\u00f3rios de fontes na internet, ent\u00e3o o que exatamente torna as fontes do Google t\u00e3o especiais?<\/p>\n Em primeiro lugar, \u00e9 gr\u00e1tis! Al\u00e9m disso, as fontes do Google s\u00e3o mantidas e entregues pelo Google, o que significa que elas t\u00eam garantia de seguran\u00e7a. \u00c9 claro que existem muitos sites duvidosos onde voc\u00ea pode baixar fontes gratuitas, mas quem sabe o que mais voc\u00ea vai pegar com esses arquivos?<\/p>\n A qualidade das fontes em tais sites tamb\u00e9m pode, \u00e0s vezes, ser question\u00e1vel.<\/p>\n O Google tem curadoria de uma sele\u00e7\u00e3o de mais de mil fontes de alta qualidade. Quando voc\u00ea n\u00e3o \u00e9 um designer gr\u00e1fico<\/a> com um olho perfeito para a tipografia, \u00e9 uma escolha mais segura.<\/p>\n Em segundo lugar, n\u00e3o h\u00e1 restri\u00e7\u00f5es complicadas de licenciamento. Todas as fontes do cat\u00e1logo Google Fonts s\u00e3o de c\u00f3digo aberto e gratuitas para uso em projetos comerciais. Voc\u00ea pode baix\u00e1-las ou incorpor\u00e1-las em seu site, e pode at\u00e9 us\u00e1-las em projetos impressos.<\/p>\n Embora n\u00e3o haja uma licen\u00e7a unificada, a maioria das fontes no reposit\u00f3rio utiliza a Open Font License<\/a>.<\/p>\n Outras “fontes gratuitas” raramente s\u00e3o realmente gratuitas e v\u00eam com uma s\u00e9rie de restri\u00e7\u00f5es confusas de licenciamento que podem lhe causar problemas se voc\u00ea cometer um erro.<\/p>\n E finalmente, \u00e9 f\u00e1cil adicionar Fontes do Google ao seu site usando a API de Fontes do Google<\/a>. Alternativamente, voc\u00ea pode baix\u00e1-las individualmente e carreg\u00e1-las para seu servidor web via FTP\/SFTP<\/a>.<\/p>\n Enquanto as fontes do Google tendem a ser simples e talvez n\u00e3o t\u00e3o brilhantes como algumas fontes pagas, elas certamente batem as fontes seguras para a web<\/a> que v\u00eam pr\u00e9-instaladas com os principais sistemas operacionais, as mesmas fontes que todos j\u00e1 viram milhares de vezes antes.<\/p>\n\n Se h\u00e1 uma coisa que voc\u00ea deve aprender ao projetar um site<\/a>, \u00e9 como escolher uma fonte Google adequada para seu projeto. Uma boa tipografia far\u00e1 ou quebrar\u00e1 seu site.<\/p>\n Pode parecer um detalhe sem import\u00e2ncia, mas pode ser a diferen\u00e7a entre algu\u00e9m deixar seu site mais cedo ou ficar por perto para se tornar um leitor ou cliente fiel.<\/p>\n Escolher a fonte certa \u00e9 algo que os designers gr\u00e1ficos passam anos dominando, mas mantendo alguns princ\u00edpios em mente, voc\u00ea pode escolher uma bela fonte para o seu site.<\/p>\n Ent\u00e3o, como voc\u00ea desenvolve uma lista das melhores fontes do Google quando tanto disto \u00e9 subjetivo? N\u00e3o queremos que esta lista seja tendenciosa, ent\u00e3o vamos com os dados para construir uma lista das fontes mais populares do Google.<\/p>\n Usaremos a an\u00e1lise do Google Fonts<\/a> para confiar na sabedoria das multid\u00f5es. Com mais de 50 trilh\u00f5es de visualiza\u00e7\u00f5es totais de fontes, h\u00e1 muito poucos dados para extrair do Google.<\/p>\n Ent\u00e3o, iremos um pouco al\u00e9m dos n\u00fameros de popularidade bruta e escolheremos algumas fontes HTML<\/a> que est\u00e3o ganhando popularidade.<\/p>\n Pronto? Vamos come\u00e7ar!<\/p>\n A fonte de escolha da Kinsta, Roboto<\/a>, \u00e9 uma fonte sans-serif de Christian Robertson que o Google desenvolveu como uma fonte de sistema para Android. Agora \u00e9 muito popular, vem em 12 estilos diferentes, e faz muitas apari\u00e7\u00f5es nas estat\u00edsticas do Google Fonts.<\/p>\n Por exemplo, Roboto \u00e9 a fonte mais popular. Mas Roboto Condensed<\/a> \u00e9 tamb\u00e9m a sexta fonte mais popular, e Roboto Slab<\/a> tamb\u00e9m faz uma apari\u00e7\u00e3o no n\u00famero 12!<\/p>\n Open Sans Condensed<\/a> \u00e9 uma fonte altamente leg\u00edvel 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\u00fancios impressos e digitais<\/a>. A Open Sans Condensed, sua fonte irm\u00e3, tamb\u00e9m ocupa a d\u00e9cima terceira posi\u00e7\u00e3o mais popular no Google Fonts.<\/p>\n Lato<\/a> \u00e9 outra escolha popular de \u0141ukasz Dziedzic. Tem uma hist\u00f3ria e tanto por tr\u00e1s de seu projeto, equilibrando objetivos conflitantes, resultando em uma fonte sans-serif \u00fanica e leve.<\/p>\n Montserrat<\/a> \u00e9 uma fonte sans-serif de Julieta Ulanovsky, que vive no bairro ep\u00f4nimo de Montserrat, em Buenos Aires. Com 18 estilos diferentes que v\u00e3o do leve ao pesado, voc\u00ea tem uma grande variedade de escolha.<\/p>\n Oswald<\/a> \u00e9 uma fonte sans-serif originalmente desenvolvida por Vernon Adams. Foi projetada com o distinto estilo g\u00f3tico alternativo em mente, tornado evidente por seus tra\u00e7os ousados.<\/p>\n Source Sans Pro<\/a> \u00e9 uma fonte sans-serif criada para Adobe e a primeira fonte de c\u00f3digo aberto da Adobe. Feita por Paul Hunt, suas letras leves a tornam limpa e leg\u00edvel.<\/p>\n Slabo<\/a> \u00e9 uma fonte serif desenvolvida por John Hudson da Tiro Typeworks. Esta fonte \u00e9 especificamente projetada para certos tamanhos – 27px ou 13px, dependendo de suas necessidades.<\/p>\n Com 18 estilos diferentes, Raleway<\/a> \u00e9 outra fonte sans-serif para fam\u00edlias grandes, inicialmente criada por Matt McInerney. Se voc\u00ea gosta de Raleway e est\u00e1 procurando algo \u00fanico, Raleway Dots<\/a> oferece um estilo similar com uma abordagem pontilhada que pode funcionar para grandes t\u00edtulos<\/a>.<\/p>\n O PT Sans<\/a> foi desenvolvido para os tipos p\u00fablicos da Federa\u00e7\u00e3o Russa e, como tal, inclui tanto caracteres latinos quanto cir\u00edlicos. H\u00e1 tamb\u00e9m v\u00e1rias outras fontes na fam\u00edlia PT, incluindo algumas op\u00e7\u00f5es sans-serif.<\/p>\n O nome Merriweather<\/a> evoca a ideia de um design agrad\u00e1vel, e \u00e9 exatamente isso que seus designers pretendiam. Embora n\u00e3o seja t\u00e3o popular, Merriweather Sans<\/a> \u00e9 um projeto que se encaixa bem.<\/p>\n Pelos n\u00fameros, as dez fontes acima s\u00e3o as mais populares do Google Fonts. Mas mostrar apenas as op\u00e7\u00f5es mais populares faz uma injusti\u00e7a \u00e0s \u00f3timas fontes em ascens\u00e3o que ainda n\u00e3o tiveram a exposi\u00e7\u00e3o necess\u00e1ria para aparecer nas an\u00e1lises.<\/p>\n Aqui est\u00e3o algumas das nossas favoritas que n\u00e3o apareceram no topo das an\u00e1lises.<\/p>\n Noto<\/a> \u00e9 uma fonte comissionada pelo Google que vem tanto na vers\u00e3o serif como na vers\u00e3o sans-serif. Est\u00e1 recebendo atualiza\u00e7\u00f5es regulares, e agora h\u00e1 mais de 100 fontes de Noto, com mais chegando o tempo todo!<\/p>\n O objetivo de Noto \u00e9 cobrir todos os alfabetos e caracteres de v\u00e1rias l\u00ednguas, enquanto seu design distinto \u00e9 harmonioso entre centenas de diferentes fam\u00edlias de fontes. Estes derivados incluem o popular Noto Sans KR<\/a> e Noto Sans JP<\/a>.<\/p>\n Nunito Sans<\/a> \u00e9 uma op\u00e7\u00e3o sans-serif que est\u00e1 crescendo rapidamente em popularidade. Seu uso triplicou entre 2018 e 2019, e s\u00f3 se torna mais popular a cada ano.<\/p>\n Uma \u00f3tima op\u00e7\u00e3o para t\u00edtulos \u00e9 a fonte Concert One<\/a>, que possui um tipo arredondado. Seu design incomum certamente chamar\u00e1 a aten\u00e7\u00e3o das pessoas.<\/p>\n Prompt<\/a> \u00e9 uma op\u00e7\u00e3o sans-serif oferecida pela empresa de design de comunica\u00e7\u00e3o tailandesa Cadson Demak. Ela n\u00e3o apresenta loops (equivalente em tailand\u00eas ao sans-serif) e inclui caracteres em tailand\u00eas e latim.<\/p>\n Work Sans<\/a> \u00e9 uma fonte sans-serif otimizada para uso em telas. Os designers recomendam o uso dos estilos de peso m\u00e9dio para qualquer coisa entre 14px-48px.<\/p>\n Se voc\u00ea achou dif\u00edcil escolher uma fonte no Google Fonts, espere at\u00e9 tentar combin\u00e1-las em seu site! Felizmente, este n\u00e3o \u00e9 um problema que voc\u00ea tenha que resolver (a menos que voc\u00ea queira). H\u00e1 v\u00e1rios m\u00e9todos que voc\u00ea pode usar para encontrar as melhores combina\u00e7\u00f5es de fontes do Google.<\/p>\n Primeiro, o pr\u00f3prio site do Google Fonts sugerir\u00e1 emparelhamentos populares se voc\u00ea percorrer a p\u00e1gina para baixo:<\/p>\n Al\u00e9m disso, voc\u00ea tamb\u00e9m pode usar um site como o Font Pair<\/a> para obter mais sugest\u00f5es.<\/p>\n Uma vez que voc\u00ea encontre as fontes perfeitas para seu projeto, aqui est\u00e3o algumas das melhores pr\u00e1ticas para usar as fontes do Google no WordPress.<\/p>\n Algumas dessas fontes – como Montserrat e Raleway – v\u00eam com 18 tipos de fontes diferentes. Embora isso seja bom para lhe dar op\u00e7\u00f5es, voc\u00ea n\u00e3o quer carregar todos os 18 tipos em seu site WordPress porque isso diminuir\u00e1 seu tempo de carregamento<\/a>.<\/p>\n Seguir esta diretriz \u00e9 muito importante!<\/p>\n Para a maioria das fontes, uma boa regra geral \u00e9 usar tr\u00eas tipos como m\u00e1ximo:<\/p>\n Muitos sites WordPress que vemos hoje em dia est\u00e3o at\u00e9 mesmo pulando o it\u00e1lico e apenas indo com dois tipos de fonte diferentes.<\/p>\n Se voc\u00ea mesmo estiver incorporando as fontes do Google, voc\u00ea pode escolher exatamente quais tipos incluir. Primeiro, visite uma p\u00e1gina de fontes e depois clique em Selecionar este estilo <\/strong>ao lado daqueles que voc\u00ea deseja.<\/p>\n A maioria dos temas de WordPress hoje inclui maneiras f\u00e1ceis de escolher quais fontes e tipos do Google voc\u00ea quer usar. Mas nem todos os desenvolvedores de temas est\u00e3o focados no desempenho. Portanto, em alguns casos, talvez seja melhor desativar as fontes do Google em seu tema e adicion\u00e1-las voc\u00ea mesmo<\/a>.<\/p>\n As fontes vari\u00e1veis<\/a> tamb\u00e9m est\u00e3o come\u00e7ando a se tornar populares, sendo suportadas por todos os navegadores modernos. Elas s\u00e3o fant\u00e1sticas porque permitem que um arquivo de fonte se transforme com diferentes propriedades. O Google Fonts tem muitas fontes vari\u00e1veis para escolher, e voc\u00ea pode at\u00e9 mesmo restringir sua busca \u00e0quelas especificamente.<\/p>\n Como alternativa para servir as fontes a partir do servidor do Google, voc\u00ea tamb\u00e9m pode hospedar as fontes localmente, oferecendo benef\u00edcios de desempenho<\/a>. No entanto, lembre-se que a maioria das fontes do Google provavelmente j\u00e1 est\u00e3o em cache nos navegadores das pessoas. Portanto, recomendamos que voc\u00ea fa\u00e7a seus testes de desempenho.<\/p>\n Se voc\u00ea estiver usando uma fonte premium diferente das fontes do Google, como a fonte “Brandon” que usamos em nosso site Kinsta, hosped\u00e1-las localmente (e servi-las a partir do seu CDN) \u00e9 o melhor caminho. Para saber mais sobre este t\u00f3pico, confira nossos artigos sobre como hospedar fontes localmente<\/a>.<\/p>\n As fontes s\u00e3o exatamente como plugins e temas de WordPress – com o tempo, elas recebem atualiza\u00e7\u00f5es e melhorias para torn\u00e1-las ainda melhores. E, embora os riscos n\u00e3o sejam t\u00e3o ruins quanto os plugins de WordPress, ainda pode ser ben\u00e9fico escolher uma fonte que receba atualiza\u00e7\u00f5es regulares. Por exemplo, a fam\u00edlia Noto do Google tem recebido atualiza\u00e7\u00f5es regulares<\/a> desde 2014.<\/p>\n Como a maioria das fontes desta lista \u00e9 popular, \u00e9 provavelmente uma boa aposta que qualquer fonte desta lista receber\u00e1 atualiza\u00e7\u00f5es e melhorias regulares. E se voc\u00ea decidir sair da lista, certificar-se de que a fonte escolhida seja popular o suficiente para chamar a aten\u00e7\u00e3o nunca \u00e9 uma m\u00e1 ideia.<\/p>\n De acordo com a Organiza\u00e7\u00e3o Mundial da Sa\u00fade<\/a>, e com dados coletados em 2015, estima-se que 253 milh\u00f5es de pessoas vivem com defici\u00eancia visual<\/a>: 36 milh\u00f5es s\u00e3o cegas, e 217 milh\u00f5es t\u00eam defici\u00eancia moderada a grave da vis\u00e3o. Al\u00e9m disso, o n\u00famero de pessoas com alguma forma de defici\u00eancia aumentou para 2,2 bilh\u00f5es a partir de 2026.<\/p>\n Ao utilizar o Google Fonts, voc\u00ea pode controlar a apar\u00eancia com o CSS, como cor e tamanho. Portanto, n\u00e3o se esque\u00e7a de seguir as Diretrizes de Acessibilidade de Conte\u00fado da Web (WCAG) 2.0<\/a>. Isso garantir\u00e1 que seu conte\u00fado seja facilmente acess\u00edvel a todos.<\/p>\n Seguir estas diretrizes tornar\u00e1 o conte\u00fado acess\u00edvel a uma gama mais ampla de pessoas com defici\u00eancias, incluindo cegueira e baixa vis\u00e3o, surdez e perda auditiva, defici\u00eancias de aprendizagem, limita\u00e7\u00f5es cognitivas, movimento limitado, defici\u00eancias de fala, fotossensibilidade e combina\u00e7\u00f5es destas. – Diretrizes de Acessibilidade de Conte\u00fado da Web (WCAG) 2.0<\/em><\/p>\n Uma diretriz cr\u00edtica \u00e9 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\u00e7\u00f5es, pois tornava dif\u00edcil de ler. A \u00faltima coisa que voc\u00ea quer \u00e9 publicar um conte\u00fado incr\u00edvel e fazer com que ele seja uma dor nos olhos das pessoas!<\/p>\n Voc\u00ea pode usar uma ferramenta como o Color Contrast Checker<\/a> da WebAIM para ver se suas cores de fonte passam as recomenda\u00e7\u00f5es oficiais. Por exemplo, voc\u00ea pode ver que as cores em nossos artigos no blog agora passaram no teste. \ud83d\udc4d<\/p>\n Com uma ou duas fontes escolhidas, o passo final \u00e9 adicion\u00e1-la ao seu site. Gra\u00e7as ao Google Fonts, esta tarefa \u00e9 ainda mais f\u00e1cil do que o normal.<\/p>\n Suponha que voc\u00ea queira obter uma fonte em seu site. Nesse caso, voc\u00ea tem tr\u00eas op\u00e7\u00f5es: instalar um plugin como o Easy Google Fonts<\/a> ou o Google Fonts Typography<\/a>, usar a API do Google Fonts para carregar a fonte em seu site, ou baix\u00e1-la manualmente e hosped\u00e1-la em seu site.<\/p>\nPor que usar as fontes do Google?<\/h2>\n
![\"Cat\u00e1logo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/google-fonts-homepage.jpg\")
![\"Licen\u00e7a](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/google-fonts-license-example.jpg\")
O que procurar em uma fonte do Google<\/h2>\n
\n
As 10 melhores fontes do Google em 2026<\/h2>\n
1. Roboto<\/h3>\n
![\"Roboto.\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/roboto.png\")
2. Open Sans<\/h3>\n
![\"Open](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/open-sans.png\")
3. Lato<\/h3>\n
![\"Lato.\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/lato.png\")
4. Montserrat<\/h3>\n
![\"Monstserrat.\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/montserrat.png\")
5. Oswald<\/h3>\n
![\"Oswald.\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/oswald.png\")
6. Source Sans Pro<\/h3>\n
![\"Source](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/source-sans-pro.png\")
7. Slabo 27px\/13px<\/h3>\n
![\"Slabo.\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/slabo.png\")
8. Raleway<\/h3>\n
![\"Raleway\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/google-fonts-raleway-font.jpg\")
9. PT Sans<\/h3>\n
![\"PT](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/pt-sans.png\")
10. Merriweather<\/h3>\n
![\"Merriweather.\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/merriweather-font.jpg\")
Fontes b\u00f4nus + Novas tend\u00eancias<\/h2>\n
11. Noto Sans \/ Serif<\/h3>\n
![\"Noto](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/noto-sans.png\")
12. Nunito Sans<\/h3>\n
![\"Nunito](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/nunito-sans.png\")
13. Concert One<\/h3>\n
![\"Concert](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/concert-one.png\")
14. Prompt<\/h3>\n
![\"Prompt.\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/prompt.png\")
15. Work Sans<\/h3>\n
![\"Work](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/work-sans.png\")
Como criar as melhores combina\u00e7\u00f5es de fontes do Google<\/h2>\n
![\"Descobrindo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/google-fonts-pairs-1024x352.jpg\")
<\/a>Melhores pr\u00e1ticas para usar as fontes do Google no WordPress<\/h2>\n
Limite o n\u00famero de tipos da fonte que voc\u00ea usa<\/h3>\n
\n
![\"Escolhendo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/google-fonts-select-font.jpg\")
![\"\"Setting\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/google-fonts-variable-font-search.jpg\")
<\/p>\nConsidere hospedar fontes do Google localmente<\/h3>\n
Escolha uma fonte que receba atualiza\u00e7\u00f5es<\/h3>\n
N\u00e3o esque\u00e7a da acessibilidade<\/h3>\n
![\"Ferramenta](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/color-contrast-checker.png\")
Como adicionar fontes do Google ao WordPress<\/h2>\n