Use fontes HTML (HTML fonts) para cus­to­mi­zar o conteúdo escrito exibido pelas suas páginas web. Para garantir que todos os vi­si­tan­tes vi­su­a­li­zem o seu site cor­re­ta­mente, não deixe de usar fontes seguras para web.

Tipos de fontes HTML

Em teoria, um número gi­gan­tesco de fontes HTML di­fe­ren­tes está dis­po­ní­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 cor­re­ta­mente. No entanto, vários problemas podem ocorrer se você fizer isso. Em alguns casos, fontes decoradas ou pequenas não são ren­de­ri­za­das como desejado. Isso não só exerce um efeito negativo sobre o design das páginas, como também impacta a le­gi­bi­li­dade do texto. Outro problema pode ocorrer se a fonte HTML não estiver instalada nos com­pu­ta­do­res dos vi­si­tan­tes do seu site.

Hos­pe­da­gem que se adapta às suas ambições
  • Fique online com 99,99% de tempo de atividade e segurança robusta
  • Aumente o de­sem­pe­nho com um clique à medida que o tráfego cresce
  • Inclui domínio gratuito, SSL, e-mail e suporte 24 horas por dia, 7 dias por semana

O que são fontes HTML seguras para web

Se você está pro­cu­rando opções adequadas para seu site, adote as fontes seguras para web. Elas vêm pré-ins­ta­la­das na maioria dos sistemas ou são dis­po­ni­bi­li­za­das como fontes web em ser­vi­do­res públicos. Essa abordagem ajuda a evitar problemas de ren­de­ri­za­ção e garante a exibição con­sis­tente do seu site em di­fe­ren­tes na­ve­ga­do­res e sistemas ope­ra­ci­o­nais.

Fontes seguras para web

Fontes seguras para web são aquelas que vêm pré-ins­ta­la­das na maioria dos dis­po­si­ti­vos e sistemas ope­ra­ci­o­nais. As fontes seguras para web mais co­nhe­ci­das são:

  • Arial
  • Courier New
  • Helvetica
  • Times New Roman
  • Georgia
  • Verdana

Essas fontes são am­pla­mente usadas e oferecem um alto nível de com­pa­ti­bi­li­dade para seu site.

Fontes web

Além das fontes pré-ins­ta­la­das, você também pode usar fontes web. Elas são car­re­ga­das a partir de ser­vi­do­res públicos e oferecem uma grande variedade de estilos ti­po­grá­fi­cos. Um provedor popular de fontes web é o Google Fonts. O uso desse tipo de fonte pos­si­bi­lita per­so­na­li­zar o design do seu site sem afetar seu nível de com­pa­ti­bi­li­dade. Veja abaixo um exemplo de como im­ple­men­tar uma fonte web:

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
        }
    </style>
</head>
<body>
    <p>Esse texto usa a fonte web Roboto.</p>
</body>
</html>
html

Quais são as tags para usar fontes HTML?

Existem duas tags HTML que podem ser usadas para im­ple­men­tar fontes nas páginas: <font> e <basefont>. No entanto, desde a in­tro­du­ção do HTML5, ambas passaram a ser con­si­de­ra­das obsoletas. Hoje, a re­co­men­da­ção é gerenciar as fontes com CSS.

<font>

A tag <font> é usada para se­le­ci­o­nar e con­fi­gu­rar 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 res­pec­ti­vos valores:

Atributo Valor Descrição
color Nome de cor, código he­xa­de­ci­mal ou valor RGB Es­pe­ci­fica a cor do texto
size Valor numérico de 1 a 7 Define o tamanho das fontes HTML
face Nome da fonte HTML Es­pe­ci­fica a família de fontes HTML

A sintaxe da tag <font> é:

<font size=" " color=" " face=" "> ....</font>
html

O exemplo de código a seguir mostra como usar a tag:

<!DOCTYPE html>
<html>
<head>
<title>Tags de fontes HTML</title>
</head>
<body>
<font size="3" color="#0000FF" face="arial, sans-serif">
Isso é um exemplo de texto.
</font>
</body>
</html>
html

<basefont>

A tag <basefont> funciona de um jeito parecido. Ela define a família de fontes HTML e suas es­pe­ci­fi­ca­ções para o documento inteiro. Seus atributos são idênticos aos usados na tag <font>. Sua sintaxe é a seguinte:

<basefont size=" " color=" " face=" "> ....</basefont>
html

O exemplo abaixo ilustra a im­ple­men­ta­ção de uma fonte usando a tag <basefont>:

<!DOCTYPE html>
<html>
<head>
<title>Tag de fontes HTML</title>
</head>
<body>
<basefont size="3" color="#0000FF" face="arial, sans-serif">
Isso é um exemplo de texto.
</font>
</body>
</html>
html

Como es­pe­ci­fi­car tamanho, cor e família de fontes HTML

Desde a in­tro­du­ção do HTML5, as duas tags men­ci­o­na­das acima caíram em desuso. No entanto, ainda é possível con­fi­gu­rar fontes HTML como você preferir. Veja, por exemplo, como definir o tamanho de fontes HTML:

<!DOCTYPE html>
<html>
<head>
<title>Tamanho da fonte</title>
</head>
<body>
<font size = "1">O tamanho da fonte é = "1"</font><br />
<font size = "2">O tamanho da fonte é = "2"</font><br />
<font size = "3">O tamanho da fonte é = "3"</font><br />
<font size = "4">O tamanho da fonte é = "4"</font><br />
<font size = "5">O tamanho da fonte é = "5"</font><br />
<font size = "6">O tamanho da fonte é = "6"</font><br />
<font size = "7">O tamanho da fonte é = "7"</font>
</body>
</html>
html

Veja como es­pe­ci­fi­car a cor da fonte no exemplo abaixo:

<!DOCTYPE html>
<html>
<head>
<title>Cor da fonte</title>
</head>
<body>
<font color = "#008080">Este texto é verde-azulado.</font><br />
<font color = "#8B0000">Este texto é vermelho escuro.</font>
</body>
</html>
html

Veja como se­le­ci­o­nar uma família de fontes HTML:

<!DOCTYPE html>
<html>
<head>
<title>Família de fontes HTML</title>
</head>
<body>
<font face = "Lucida Console" size = "5">Lucida Console</font><br />
</body>
</html>
html

Se o visitante do seu site não tiver a família de fontes HTML instalada em seu dis­po­si­tivo, uma fonte padrão será exibida em seu lugar.

Construa sua marca com um ótimo domínio
Registre um nome de domínio
  • SSL Wildcard grátis para mais segurança
  • Registro privado grátis para mais pri­va­ci­dade
  • Domain Connect grátis para con­fi­gu­rar DNS fácil
Ir para o menu principal