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.

Hospedagem que se adapta às suas ambições
  • Fique online com 99,99% de tempo de atividade e segurança robusta
  • Aumente o desempenho 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á 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. 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:

<!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 implementar fontes nas páginas: <font> e <basefont>. No entanto, desde a introdução do HTML5, ambas passaram a ser consideradas obsoletas. Hoje, a recomendação é gerenciar as fontes com CSS.

<font>

A tag <font> é 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 <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 especificaçõ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 implementaçã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 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:

<!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 especificar 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 selecionar 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 dispositivo, 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 privacidade
  • Domain Connect grátis para configurar DNS fácil
Este artigo foi útil?
Ir para o menu principal