# Como escolher e usar fontes HTML seguras para web Use fontes HTML (*HTML fonts*) para customizar o conteúdo escrito exibido pelas suas páginas web. Para garantir que todos os visitantes visualizem o seu site corretamente, não deixe de usar fontes seguras para web. ## Tipos de fontes HTML Em teoria, um número gigantesco de fontes HTML diferentes está disponível. Como o próprio HTML não oferece uma fonte padrão, você pode usar qualquer opção que quiser em suas páginas, desde que a configure corretamente. No entanto, vários problemas podem ocorrer se você fizer isso. Em alguns casos, fontes decoradas ou pequenas **não são renderizadas como desejado**. Isso não só exerce um efeito negativo sobre o design das páginas, como também impacta a legibilidade do texto. Outro problema pode ocorrer se a fonte HTML não estiver **instalada** nos computadores dos visitantes do seu site. ## O que são fontes HTML seguras para web Se você está procurando opções adequadas para seu site, adote as fontes seguras para web. Elas vêm **pré-instaladas** na maioria dos sistemas ou são disponibilizadas como fontes web em servidores públicos. Essa abordagem ajuda a evitar problemas de renderização e garante a exibição consistente do seu site em diferentes navegadores e sistemas operacionais. ### Fontes seguras para web Fontes seguras para web são aquelas que vêm pré-instaladas na maioria dos dispositivos e sistemas operacionais. As fontes seguras para web mais conhecidas são: - Arial - Courier New - Helvetica - Times New Roman - Georgia - Verdana Essas fontes são amplamente usadas e oferecem um alto nível de compatibilidade para seu site. ### Fontes web Além das fontes pré-instaladas, você também pode usar [fontes web](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/design-de-sites/as-melhores-fontes-para-sites/). Elas são carregadas a partir de servidores públicos e oferecem uma grande variedade de estilos tipográficos. Um provedor popular de fontes web é o Google Fonts. O uso desse tipo de fonte possibilita personalizar o design do seu site sem afetar seu nível de compatibilidade. Veja abaixo um exemplo de como implementar uma fonte web: ```html

Esse texto usa a fonte web Roboto.

``` Dica No nosso artigo sobre web design e fontes responsivas, analisamos de perto as funcionalidades e as vantagens de fontes web. ## Quais são as tags para usar fontes HTML? Existem duas tags HTML que podem ser usadas para implementar fontes nas páginas: `` e ``. No entanto, desde a introdução do HTML5, ambas passaram a ser consideradas obsoletas. Hoje, a recomendação é gerenciar as fontes com CSS. ### `` A tag `` é usada para selecionar e configurar fontes HTML. Você pode usar vários atributos HTML para definir a cor, tamanho e fonte de um texto. Estes são os atributos e seus respectivos valores:
Atributo Valor Descrição
`color` Nome de cor, código hexadecimal ou valor RGB Especifica a cor do texto
`size` Valor numérico de 1 a 7 Define o tamanho das fontes HTML
`face` Nome da fonte HTML Especifica a família de fontes HTML
A sintaxe da tag `` é: ```html .... ``` O exemplo de código a seguir mostra como usar a tag: ```html Tags de fontes HTML Isso é um exemplo de texto. ``` ### `` A tag `` funciona de um jeito parecido. Ela define a família de fontes HTML e suas especificações para o documento inteiro. Seus atributos são idênticos aos usados na tag ``. Sua sintaxe é a seguinte: ```html .... ``` O exemplo abaixo ilustra a implementação de uma fonte usando a tag ``: ```html Tag de fontes HTML Isso é um exemplo de texto. ``` ## Como especificar tamanho, cor e família de fontes HTML Desde a introdução do HTML5, as duas tags mencionadas acima **caíram em desuso**. No entanto, ainda é possível configurar fontes HTML como você preferir. Veja, por exemplo, como definir o tamanho de fontes HTML: ```html Tamanho da fonte O tamanho da fonte é = "1"
O tamanho da fonte é = "2"
O tamanho da fonte é = "3"
O tamanho da fonte é = "4"
O tamanho da fonte é = "5"
O tamanho da fonte é = "6"
O tamanho da fonte é = "7" ``` Veja como especificar a cor da fonte no exemplo abaixo: ```html Cor da fonte Este texto é verde-azulado.
Este texto é vermelho escuro. ``` Veja como selecionar uma família de fontes HTML: ```html Família de fontes HTML Lucida Console
``` Se o visitante do seu site não tiver a família de fontes HTML instalada em seu dispositivo, uma fonte padrão será exibida em seu lugar. This is a markdown version of: [https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/fontes-html/](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/fontes-html/) for AI/LLM consumption.