Como mudar a Fonte (tipo de letra) em HTML

Por | Atualizado em 2014-09-14

Neste tutorial iremos explicar como mudar a fonte (tipo de letra) em HTML, ajudando a personalizar o aspecto das suas páginas Web.

Em termos práticos, para alterar a fonte em HTML basta adicionar o seguinte código:

<font face="verdana">Este texto seria apresentado com a fonte Verdana</font>

No campo “face” deverá definir o tipo de letra que irá carregar. Você poderá optar pelas fontes seguras (safe fonts), para garantir a máxima compatibilidade. Por exemplo: Verdana, Arial, Impact, sans-serif, Georgia, etc.

É importante salientar que em HTML5 este tipo de código foi descontinuado. Então qual é a solução?

A solução passa por aplicar diferentes tipos de Fontes com a ajuda da linguagem de estilo CSS. Esta solução permite manter o código mais “limpo” ajudando a reduzir os estilos “inline”, e permite-lhe adicionar tipos de fontes externos (por exemplo, usando o Google Fonts).

html font

Como funciona?

Por exemplo, vamos imaginar que você pretende criar uma “div” com um estilo de letra específico. Para isso, basta aceder à secção <style> da sua página, onde se encontra declarado o CSS e adicionar:

. identificador{
font: sans-serif;}

Você poderá ainda personalizar o tamanho da letra, bem como adicionar outras formatações (alterar a cor, adicionar itálico, negrito, etc.). Por exemplo:

. identificador{
font: 15px Verdana;
color: red;
}

Agora, é só chamar o identificador diretamente no elemento que pretende editar. Por exemplo:

<div class="identificador">Este texto será formatado consoante os estilos que adicionou</div>

Adicionar tipos de letra do Google


O Google Fonts coloca à sua disposição vários tipos de letra gratuitos, que você poderá adicionar para dar mais “vida” às suas páginas.

A implementação é muito simples e não prejudica a performance das suas páginas (o próprio Google indica o impacto que o tipo de letra pode causar no carregamento das páginas).

Para mais detalhes, consulte o nosso tutorial: Adicionar Fontes de texto no site – Google Fonts

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *