Onde voc\u00ea pode encontrar fontes web, que fontes s\u00e3o compat\u00edveis com HTML<\/a> e quais s\u00e3o “seguras para a web” e podem ser usadas em qualquer website? Vamos explor\u00e1-las todas neste artigo.<\/p>\n Vamos come\u00e7ar!<\/p>\n Os tipos de letra t\u00eam uma rica hist\u00f3ria, mas as fontes, como as conhecemos hoje, entraram em amplo uso com o crescimento dos computadores e da Internet. As fontes digitais precisavam de tratamento especial para serem renderizadas nas telas. E quando diferentes tamanhos de tela e dispositivos entraram em jogo, as coisas s\u00f3 ficaram mais complicadas.<\/p>\n Quando se trata de fontes digitais, existem alguns tipos diferentes. Algumas fontes s\u00e3o destinadas principalmente \u00e0 impress\u00e3o e ao design gr\u00e1fico. Elas tendem a ser grandes e inadequadas para websites, mas s\u00e3o perfeitas para a cria\u00e7\u00e3o de gr\u00e1ficos. H\u00e1 tamb\u00e9m fontes “seguras para a web” que s\u00e3o encontradas na maioria de todas as m\u00e1quinas.<\/p>\n Mas para web design, o que voc\u00ea precisa procurar s\u00e3o fontes da web, fontes tipogr\u00e1ficas especialmente projetadas para renderizar perfeitamente na web e atrav\u00e9s de uma variedade de dispositivos. Voc\u00ea tamb\u00e9m pode usar as fontes web em e-mails<\/a> ou outros servi\u00e7os on-line.<\/p>\n H\u00e1 algumas coisas que tornam as fontes da web diferentes de sua fonte padr\u00e3o para download. Para uma, muitas vezes n\u00e3o podem ser usadas com programas em seu computador; elas devem ser carregadas em um servidor e usadas na web.<\/p>\n Eles tamb\u00e9m s\u00e3o projetados para serem leg\u00edveis em telas diferentes e para tamanhos diferentes. Elas podem ser estilizadas com CSS<\/a> (como aplicar negrito ou it\u00e1lico, cores e outros atributos) e oferecem suporte para outras condi\u00e7\u00f5es como renderiza\u00e7\u00e3o da direita para a esquerda.<\/p>\n Embora as fontes web n\u00e3o venham instaladas em seus dispositivos ou nos de seus visitantes, existem maneiras especiais de exibi-las para que qualquer pessoa que visite seu site possa v\u00ea-las.<\/p>\n Voc\u00ea pode baixar estas fontes como de costume e carreg\u00e1-las em seu servidor, ou usar um servi\u00e7o especial de hospedagem de fontes da web que as incorpora em seu site sem exigir um download.<\/p>\n\n Algumas fontes n\u00e3o s\u00e3o para serem usadas na web, mas quais podem ser inseridas em seu site HTML?<\/p>\n Essencialmente, voc\u00ea pode usar qualquer fonte para download em seu site. Tudo que voc\u00ea precisa fazer \u00e9 carreg\u00e1-la e configur\u00e1-la corretamente, e ela deve ser exibida em seu site.<\/p>\n Mas embora voc\u00ea possa tecnicamente usar qualquer fonte em seu site, nem sempre \u00e9 a melhor id\u00e9ia. Voc\u00ea deve procurar especificamente as fontes da web, n\u00e3o as fontes destinadas a serem usadas em design gr\u00e1fico ou impresso. Algumas fontes s\u00e3o t\u00e3o estilizadas ou destinadas a tamanhos de texto t\u00e3o grandes que n\u00e3o ser\u00e3o renderizadas adequadamente em seu site. Com uma fonte da web, isto n\u00e3o \u00e9 uma preocupa\u00e7\u00e3o.<\/p>\n H\u00e1 tamb\u00e9m problemas de licenciamento para se preocupar ao usar fontes desktop em seu site (ou ao usar fontes web para design impresso). Usar uma fonte em um meio diferente daquele para o qual voc\u00ea a comprou pode lhe trazer problemas. Certifique-se de ler cuidadosamente a licen\u00e7a de sua fonte antes de compr\u00e1-la.<\/p>\n Voc\u00ea tamb\u00e9m pode procurar certos hosts que lhe permitem usar uma simples chamada em HTML para renderizar suas fontes em seu pr\u00f3prio website atrav\u00e9s de planos gratuitos ou pagos.<\/p>\n De qualquer forma, desde que a fonte utilizada seja carregada corretamente<\/a> e tenha o tipo de arquivo correto:<\/p>\n Com estes tipos de arquivo de fonte, voc\u00ea poder\u00e1 ent\u00e3o utiliz\u00e1-lo em todo o seu site e estiliz\u00e1-lo com HTML e CSS.<\/p>\n H\u00e1 tamb\u00e9m fontes seguras na web que normalmente funcionam universalmente em todos os navegadores e programas.<\/p>\n Um problema com a maioria das fontes da web \u00e9 que n\u00e3o h\u00e1 garantia de que elas ser\u00e3o exibidas corretamente em seu site. Ao contr\u00e1rio do design gr\u00e1fico, onde voc\u00ea pode simplesmente criar uma imagem em um programa e imprimi-la para distribui\u00e7\u00e3o, um navegador<\/a> deve renderizar as fontes da web toda vez que algu\u00e9m abrir a p\u00e1gina. Se suas fontes n\u00e3o forem carregadas, voc\u00ea pode acabar com um website em branco e quebrado.<\/p>\n Por esse motivo, alguns propriet\u00e1rios de websites optam por confiar apenas em fontes seguras na web<\/a>. Estas v\u00eam pr\u00e9-instaladas na maioria dos sistemas, de modo que s\u00e3o exibidas corretamente em todos os dispositivos, exceto os mais obscuros. Elas tamb\u00e9m tendem a carregar muito mais r\u00e1pido do que as fontes da web, que podem ser lentas de aparecer.<\/p>\n Se voc\u00ea s\u00f3 est\u00e1 preocupado em maximizar o desempenho e absolutamente garantir que seu site exiba as fontes corretamente, ent\u00e3o as fontes seguras na web s\u00e3o para voc\u00ea.<\/p>\n Aqui est\u00e1 uma lista de fontes seguras na web que geralmente podem ser utilizadas.<\/p>\n H\u00e1 tamb\u00e9m mais dezenas de fontes seguras na web<\/a>, mas estas s\u00e3o as mais onipresentes entre os dispositivos.<\/p>\n De todos estes, Arial, Times New Roman, Helvetica e Courier New s\u00e3o os mais seguros. Apesar de serem considerados seguros na web, alguns dos outros n\u00e3o funcionam em certos sistemas operacionais.<\/p>\n A quest\u00e3o \u00e9 que, a menos que voc\u00ea esteja administrando algo como um site governamental ou um simples site informativo, n\u00e3o vale a pena sacrificar sua marca, evitando a maioria das fontes. As fontes seguras na Web s\u00e3o leg\u00edveis, mas tamb\u00e9m s\u00e3o muito gen\u00e9ricas e muito utilizadas.<\/p>\n \u00c9 muito melhor escolher um conjunto de fontes mais agrad\u00e1vel e \u00fanico para usar em seu website, especialmente porque h\u00e1 uma solu\u00e7\u00e3o para a quest\u00e3o das fontes da web que n\u00e3o s\u00e3o carregadas: fontes fallback.<\/p>\n As pilhas de fontes, tamb\u00e9m conhecidas como fontes fallback, s\u00e3o o \u00fanico motivo para usar fontes ousadas e criativas da web.<\/p>\n N\u00e3o importa o que voc\u00ea fa\u00e7a ou que precau\u00e7\u00f5es tome, sempre h\u00e1 algu\u00e9m que n\u00e3o ser\u00e1 capaz de carregar suas fontes. Talvez eles tenham o Javascript desativado, para que suas fontes hospedadas n\u00e3o sejam renderizadas corretamente, ou algo d\u00ea errado no c\u00f3digo<\/a> e impe\u00e7a a exibi\u00e7\u00e3o das fontes que voc\u00ea carregou. Ou talvez uma certa fonte n\u00e3o seja compat\u00edvel com o dispositivo de algu\u00e9m.<\/p>\n Gra\u00e7as \u00e0s fontes fallback<\/a>, \u00e9 f\u00e1cil carregar uma fonte segura da web se algo der errado. Isto funciona selecionando uma fonte que o usu\u00e1rio tenha instalado com base na fam\u00edlia de fontes<\/a>:<\/p>\n Lembre-se que as pilhas de fontes s\u00e3o de fato uma “pilha”; \u00e9 inteiramente poss\u00edvel ter v\u00e1rias fontes em seq\u00fc\u00eancia. Basta garantir que voc\u00ea sempre tenha uma fonte segura para a web no final da pilha, e voc\u00ea ainda tem a chance de fazer passar sua marca com uma fonte semelhante se a principal falhar.<\/p>\n Se voc\u00ea quiser adicionar uma fonte web ao seu site, voc\u00ea tem algumas op\u00e7\u00f5es.<\/p>\n Para usu\u00e1rios do WordPress, a maneira mais f\u00e1cil de obter fontes em seu site \u00e9 usando um plugin. As duas fontes mais populares s\u00e3o Easy Google Fonts<\/a> e Use Any Font<\/a>. A primeira simplifica o processo de adi\u00e7\u00e3o das fontes do Google ao seu site, enquanto a UAF permite que voc\u00ea fa\u00e7a o upload das fontes diretamente em seu site.<\/p>\n Se voc\u00ea n\u00e3o estiver usando WordPress, ou n\u00e3o quiser confiar em um plugin, o processo exigir\u00e1 alguns ajustes manuais.<\/p>\n Primeiro, voc\u00ea pode usar fontes hospedadas em outro lugar, como no Google Fonts<\/a>. As instru\u00e7\u00f5es aqui dependem de qual servi\u00e7o voc\u00ea escolher. Com o Google Fonts, voc\u00ea precisaria incorporar a fonte que deseja usar em sua Voc\u00ea tamb\u00e9m pode hospedar localmente fontes<\/a> que voc\u00ea baixou da internet em seu website. Isto pode ser prefer\u00edvel porque voc\u00ea n\u00e3o precisar\u00e1 contar com servi\u00e7os de terceiros.<\/p>\n Felizmente, isto \u00e9 muito f\u00e1cil de fazer desde que voc\u00ea tenha uma fonte web devidamente configurada. Basta carregar os arquivos em seu servidor, depois use a regra @font-face<\/a> em sua folha de estilos para defini-la. Por exemplo:<\/p>\n Ent\u00e3o voc\u00ea pode usar a etiqueta da Uma vez que sua fonte \u00e9 carregada com seguran\u00e7a em seu website, voc\u00ea pode agora estiliz\u00e1-la com HTML e CSS<\/a>. Mesmo que voc\u00ea tenha muito pouca habilidade de programa\u00e7\u00e3o, estilizar uma fonte \u00e9 bastante f\u00e1cil. Voc\u00ea pode mudar a cor do texto, a cor do fundo, o tamanho, o estilo ou o peso.<\/p>\n Nota: <\/strong>Se voc\u00ea trabalhou com vers\u00f5es HTML mais antigas, voc\u00ea deve se lembrar da etiqueta Primeiro, voc\u00ea pode mudar a fonte com c\u00f3digos de cores. Voc\u00ea pode usar um nome de cor<\/a> como “vermelho”, um c\u00f3digo RGB, ou um valor HEX. Isto \u00e9 definido com a propriedade de Ou em um elemento individual no estilo HTML:<\/p>\n A cor de fundo \u00e9 a mesma, mas usando o atributo cor de fundo.<\/p>\n A seguir, o tamanho da fonte<\/a>. Isto pode ser em pixels, porcentagens ou ems<\/a> (que s\u00e3o bons para projetar sites responsivos).<\/p>\n Ou:<\/p>\n E por \u00faltimo, o estilo<\/a> e o peso da fonte, ou it\u00e1lico e negrito. Para texto inclinado, use a etiqueta “it\u00e1lic”.<\/p>\n Voc\u00ea tamb\u00e9m pode usar tags HTML em seu lugar. Para it\u00e1lico, voc\u00ea pode usar:<\/p>\n para um texto que transmita \u00eanfase, ou uso:<\/p>\n para um texto que se destina a ser visualmente distinto.<\/p>\n E para ousadia, uso:<\/p>\n Por exemplo:<\/p>\n ou<\/p>\n Quer voc\u00ea queira usar um host de fontes de terceiros ou baix\u00e1-las, voc\u00ea precisa saber onde est\u00e3o os melhores lugares para encontrar fontes. H\u00e1 centenas de distribuidores por a\u00ed, mas um bom punhado \u00e9 conhecido por ser uma fonte confi\u00e1vel para a obten\u00e7\u00e3o de fontes. Aqui est\u00e3o algumas delas:<\/p>\n H\u00e1 milhares de fontes da web por a\u00ed, mas por onde come\u00e7ar? Aqui est\u00e3o dez fontes HTML simples que ficariam \u00f3timas em qualquer website. Todas elas s\u00e3o seguras para a web, portanto devem funcionar em quase todos os dispositivos. Elas tamb\u00e9m fazem \u00f3timas fontes de recurso.<\/p>\n Se voc\u00ea precisa de algo um pouco mais excitante, temos muitos artigos sobre fontes cursivas<\/a>, fontes de caligrafia<\/a> e fontes modernas<\/a>.<\/p>\n Arial \u00e9 a mais conhecida de todas as fontes. N\u00e3o \u00e9 a mais bela, mas \u00e9 simples e \u00fatil em uma variedade de situa\u00e7\u00f5es.<\/p>\n A fonte Times New Roman tamb\u00e9m \u00e9 uma fonte extremamente comum. \u00c9 melhor se voc\u00ea estiver administrando um site mais formal. Esta fonte serif n\u00e3o \u00e9 particularmente excitante, mas tamb\u00e9m n\u00e3o distrai.<\/p>\n Palatino pode lhe parecer familiar, pois \u00e9 freq\u00fcentemente usado na impress\u00e3o de livros. Agora \u00e9 um tipo de letra digital elegante, inclu\u00eddo por padr\u00e3o em muitos dispositivos.<\/p>\n A Verdana \u00e9 conhecida por ser muito f\u00e1cil de ler, e continua a ser \u00f3tima at\u00e9 mesmo em tamanhos grandes. Este sans serif \u00e9 uma boa alternativa Arial.<\/p>\n Reminiscente do texto antigo da m\u00e1quina de escrever, Courier New \u00e9 um \u00f3timo design monospaced para sites que querem um visual antiquado, mas leg\u00edvel.<\/p>\n Calibri \u00e9 uma fonte simples e ador\u00e1vel sem serifa que vem de s\u00e9rie com programas como Microsoft Office. No entanto, \u00e9 uma fonte propriet\u00e1ria, portanto, muitas vezes s\u00f3 \u00e9 suportada em sistemas operacionais Windows.<\/p>\n Esta fonte serif arredondada \u00e9 inspirada na fonte semelhante Garamond, segura para a web. Se voc\u00ea precisa de uma fonte formal n\u00e3o t\u00e3o s\u00e9ria quanto a Times New Roman, \u00e9 uma boa escolha.<\/p>\n Muito semelhante ao Palatino, o Garamond \u00e9 uma fonte cl\u00e1ssica frequentemente utilizada para a impress\u00e3o de livros. Apesar de ser atualizado para sistemas operacionais modernos, ele ainda parece bastante antiquado.<\/p>\n O espa\u00e7amento m\u00ednimo entre letras nesta fonte serif d\u00e1-lhe um aspecto e uma sensa\u00e7\u00e3o \u00fanicos. Voc\u00ea pode encontr\u00e1-la na maioria dos dispositivos Apple.<\/p>\n Esta fonte limpa tem funcionado como a fonte padr\u00e3o para os sistemas operacionais Windows mais antigos. Sua apar\u00eancia mais ousada a faz sobressair o suficiente sem distrair.<\/p>\n\n \u00c9 importante escolher fontes da web que ficar\u00e3o bem<\/a> em seu website e ser\u00e3o leg\u00edveis e personalizar\u00e3o sua marca<\/a>. H\u00e1 v\u00e1rios websites onde voc\u00ea pode instalar fontes gratuitas ou baixar fontes licenciadas por uma taxa, e n\u00f3s oferecemos alguns exemplos de boas fontes para come\u00e7ar.<\/p>\n Voc\u00ea n\u00e3o precisa se ater a fontes chatas e seguras na web que voc\u00ea v\u00ea h\u00e1 d\u00e9cadas em toda a Internet. Gra\u00e7as \u00e0s fontes fallback, voc\u00ea pode ir com a tipografia que quiser e definir uma fallback para ser usada se ela n\u00e3o carregar.<\/p>\n Se voc\u00ea estiver usando estas fontes HTML em seu site, em e-mails ou em seu logotipo, certifique-se de fazer muitos testes, para que seu site permane\u00e7a leg\u00edvel, e a tipografia se mescle bem com o resto do seu design.<\/p>\n","protected":false},"excerpt":{"rendered":" Se h\u00e1 uma coisa que \u00e9 mais importante para a marca e apar\u00eancia do seu site, pode ser apenas fontes. Uma fonte cuidadosamente escolhida pode transmitir …<\/p>\n","protected":false},"author":20,"featured_media":42060,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[215,64],"topic":[1039,1028],"class_list":["post-42057","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-fonts","tag-webdesign","topic-design-sites-wordpress","topic-fontes-wordpress"],"yoast_head":"\nFontes HTML: O que s\u00e3o fontes da Web?<\/h2>\n
![\"As](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Google-Fonts-Most-Popular-Web-Fonts.png\")
Que fontes voc\u00ea pode usar em HTML?<\/h3>\n
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/scribble-font.png\")
\n
O que s\u00e3o fontes seguras na Web?<\/h3>\n
![\"Arial](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/arial-font.jpg\")
\n
Uma nota sobre Font Stacks (pilhas de fontes)<\/h3>\n
\n
Como adicionar fontes com HTML<\/h2>\n
<head><\/code> e depois cham\u00e1-la quando quiser us\u00e1-la.<\/p>\n\n@font-face {\n\nfont-family: FontName;\n\nsrc: url(FontLocationOnServer);\n\n}<\/code><\/pre>\nfont-family<\/code> para chamar sua fonte onde voc\u00ea quiser no documento HTML.<\/p>\nFontes de Estilo com HTML e CSS<\/h3>\n
<font><\/code> tag. Isto n\u00e3o \u00e9 mais suportado e n\u00e3o deve ser usado. Em vez disso, voc\u00ea pode estilizar o texto com CSS ou um elemento do estilo HTML.<\/p>\ncolor<\/code> assim:<\/p>\n\np {\n\ncolor: blue;\n\n}\n<\/code><\/pre>\n\n<p style=\"color:blue;\">Text.<\/p>\n<\/code><\/pre>\n\np {\n\nbackground-color: blue;\n\n}<\/code><\/pre>\n p {\n\nfont-size: 16px;\n\n}<\/code><\/pre>\n<p style=\"font-size:200%;\">Text.<\/p><\/code><\/pre>\n![\"Ajuste](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/font-size-css.png\")
.italic {\n\nfont-style: italic;\n\n}\n\nAnd for bold:\u00a0\n\n.bold {\n\nfont-weight: bold;\n\n}<\/code><\/pre>\n![\"Defini\u00e7\u00e3o](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/font-style-css.png\")
<em><\/code><\/pre>\n <i> <\/code><\/pre>\n<b><\/code> or <strong><\/code><\/pre>\n<b>Bold Text<\/b><\/code><\/p>\n<strong>I'm of special importance.<\/strong><\/code><\/pre>\nOnde obter as fontes HTML?<\/h2>\n
\n
![\"Fontes](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/google-fonts.jpg\")
\n
As 10 principais fontes HTML<\/h2>\n
1. Arial<\/h3>\n
![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/arial-font.png\")
2. Times New Roman<\/h3>\n
3. Palatino<\/h3>\n
![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/palatino-font.png\")
4. Verdana<\/h3>\n
5. Courier New<\/h3>\n
![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/courier-new-font.png\")
6. Calibri<\/h3>\n
![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/calibri-font.png\")
7. Georgia<\/h3>\n
![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/georgia-font.jpg\")
8. Garamond<\/h3>\n
![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/garamond-font.png\")
9. Didot<\/h3>\n
![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/didot-font.jpg\")
10. Tahoma<\/h3>\n
![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/tahoma-font.png\")
Resumo<\/h2>\n