CSS | Como personalizar a fonte

Este post foi atualizado em agosto/2009.

As propriedades em CSS que modificam a fonte são:

1. font-family
2. font-style
3. font-variant
4. font-weight
5. font-size
6. font

Família da fonte

Definimos o família de fonte com font-family:

<div style="font-family: 'Lucida Bright', serif">Este texto vai aparecer com a fonte Lucida Bright se você tiver ela instalada. Caso contrário, ele será mostrado com a fonte serifa padrão de seu navegador.</div>

Este texto vai aparecer com a fonte Lucida Bright se você tiver ela instalada. Caso contrário, ele será mostrado com a fonte serifa padrão de seu navegador.

Ao escolher a fonte, podemos definir a espécie (times new roman, verdana…) ou o gênero (serif, sans-serif) da fonte.

Serif
<div style="font-family:serif">Este texto vai aparecer com a fonte de serifa padrão de seu navegador.</div>	Este texto vai aparecer com a fonte de serifa padrão de seu navegador.
<div style="font-family:georgia, serif">Este texto vai aparecer com a fonte Georgia, mas se você a desinstalou, vai aparecer a fonte serifa padrão do navegador.</div>	Este texto vai aparecer com a fonte Georgia, mas se você a desinstalou, vai aparecer a fonte serifa padrão do navegador.
<div style="font-family:garamond, serif">Este texto vai aparecer com a fonte Garamond, mas se você a desinstalou, vai aparecer a fonte serifa padrão do navegador.</div>	Este texto vai aparecer com a fonte Garamond, mas se você a desinstalou, vai aparecer a fonte serifa padrão do navegador.
<div style="font-family:'Monotype Corsiva', serif">Este texto deve aparecer com a fonte Monotype Corsiva, mas se ela não existe em seu computador, aparecerá com a fonte serifa padrão do navegador.</div>	Este texto deve aparecer com a fonte Monotype Corsiva, mas se ela não existe em seu computador, aparecerá com a fonte serifa padrão do navegador.
Sans-serif
<div style="font-family:sans-serif">Este texto vai aparecer com a fonte sem serifa padrão de seu navegador.</div>	Este texto vai aparecer com a fonte sem serifa padrão de seu navegador.
<div style="font-family:verdana, sans-serif">Este texto deve aparecer com a fonte Verdana, mas se ela não existe em seu computador, aparecerá com a fonte sem serifa padrão do navegador.</div>	Este texto deve aparecer com a fonte Verdana, mas se ela não existe em seu computador, aparecerá com a fonte sem serifa padrão do navegador.
<div style="font-family:trebuchet ms, sans-serif">Este texto deve aparecer com a fonte Trebuchet MS, mas se ela não existe em seu computador, aparecerá com a fonte sem serifa padrão da máquina.</div>	Este texto deve aparecer com a fonte Trebuchet MS, mas se ela não existe em seu computador, aparecerá com a fonte sem serifa padrão da máquina.
<div style="font-family:'Arial Rounded MT Bold', sans-serif">Este texto deve aparecer com a fonte Arial Rounded MT Bold, mas se ela não existe em seu computador, aparecerá com a fonte sem serifa padrão do navegador.</div>	Este texto deve aparecer com a fonte Arial Rounded MT Bold, mas se ela não existe em seu computador, aparecerá com a fonte sem serifa padrão do navegador.
Monospace
<div style="font-family:monospace">Este texto vai aparecer com a fonte monoespaçada padrão de seu navegador.</div>	Este texto vai aparecer com a fonte monoespaçada padrão de seu navegador.
<div style="font-family:'OCR A Std', monospace">Este texto deve aparecer com a fonte OCR A Std, mas se ela não existe em seu computador, aparecerá com a fonte monoespaçada padrão do navegador.</div>	Este texto deve aparecer com a fonte OCR A Std, mas se ela não existe em seu computador, aparecerá com a fonte monoespaçada padrão do navegador.
<div style="font-family:'Lucida Console', monospace">Este texto deve aparecer com a fonte Lucida Console, mas se ela não existe em seu computador, aparecerá com a fonte monoespaçada padrão do navegador.</div>	Este texto deve aparecer com a fonte Lucida Console, mas se ela não existe em seu computador, aparecerá com a fonte monoespaçada padrão do navegador.
<div style="font-family:courier new, monospace">Este texto deve aparecer com a fonte Courier New, mas se ela não existe em seu computador, aparecerá com a fonte monoespaçada padrão do navegador.</div>	Este texto deve aparecer com a fonte Courier New, mas se ela não existe em seu computador, aparecerá com a fonte monoespaçada padrão do navegador.
Cursive
<div style='font-family:cursive;'>Este texto deve aparecer com a fonte <b>cursiva</b> padrão do navegador.</div>	Este texto deve aparecer com a fonte cursiva padrão do navegador.
<div style="font-family:'Lucida Calligraphy', cursive;">Este texto deve aparecer com a fonte <b>Lucida Calligraphy</b> ou com a fonte cursiva padrão do navegador.</div>	Este texto deve aparecer com a fonte Lucida Calligraphy ou com a fonte cursiva padrão do navegador padrão do navegador.
Fantasy
<div style='font-family:fantasy;'>Este texto deve aparecer com a fonte <b>fantasy</b> padrão do navegador.</div>	Este texto deve aparecer com a fonte fantasy padrão do navegador.
<div style='font-family:Impact, fantasy;'>Este texto deve aparecer com a fonte <b>Impact</b> ou com a fonte <b>fantasy</b> padrão do navegador.</div>	Este texto deve aparecer com a fonte Impact ou com a fonte fantasy padrão do navegador.

Estilo da fonte

Definimos o estilo da fonte com font-style:

<div style='font-style:inherit;'>Com inherit o texto segue o estilo herdado da tag onde estiver inserido.</div>	Com inherit o texto segue o estilo herdado da tag onde estiver inserido.
<div style='font-style:normal;'>Com normal o texto segue a inclinação padrão do tipo.</div>	Com normal o texto segue a inclinação padrão do tipo.
<div style='font-style:italic;'>Com italic o texto fica inclinado para a direita.</div>	Com italic o texto fica inclinado para a direita.
<div style='font-style:oblique;'>Com oblique o texto fica inclinado para a direita.</div>	Com oblique o texto fica inclinado para a direita.

Essa propriedade não causa qualquer alteração em fontes que não têm a opção de estilo itálico.

Variação da fonte

Definimos a variação da fonte com font-variant:

<div style='font-variant:inherit;'>Com <strong>inherit </strong>a fonte terá a mesma <i>variant</i> que o elemento no qual a tag está inserida.</div>	Com inherit a fonte terá a mesma variant que o elemento no qual a tag está inserida.
<div style='font-variant:normal;'>Com <strong>normal</strong> a fonte fica assim.</div>	Com normal a fonte fica assim.
<div style="font-variant: small-caps;">Com <strong>small-caps</strong> a fonte fica assim.</div>	Com small-caps a fonte fica assim.

Antes de tirar conclusões erradas, observe atentamente a diferença entre um texto com small-caps (maiúsculas menores) e um texto com uppercase (maiúsculas):

<div style='font-variant:small-caps;'>Eu, Helen Fernanda, mantenho voluntariamente o blog HTMHelen, atualizando-o nas minhas horas livres com assuntos que interessam a blogueiros iniciantes.</div>	Eu, Helen Fernanda, mantenho voluntariamente o blog HTMHelen, atualizando-o nas minhas horas livres com assuntos que interessam a blogueiros iniciantes.
<div style='text-transform:uppercase;'>Eu, Helen Fernanda, mantenho voluntariamente o blog HTMHelen, atualizando-o nas minhas horas livres com assuntos que interessam a blogueiros iniciantes.</div>	Eu, Helen Fernanda, mantenho voluntariamente o blog HTMHelen, atualizando-o nas minhas horas livres com assuntos que interessam a blogueiros iniciantes.

Espessura da fonte

Definimos a espessura da fonte com font-weight:

<div style="font-weight:inherit;">Com <em>inherit</em> o texto segue o padrão do elemento em que a tag está inserida.</div>	Com inherit o texto segue o padrão do elemento em que a tag está inserida.
<div style="font-weight:bolder;">Com <em>bolder</em> o texto fica em negrito.</div>	Com bolder o texto fica em negrito.
<div style="font-weight:bold;">Com <em>bold</em> o texto fica em negrito.</div>	Com bold o texto fica em negrito.
<div style='font-weight:normal;'>Com <em>normal</em> o texto fica com a espessura padrão.</div>	Com normal o texto fica com a espessura padrão.
<div style='font-weight:lighter;'>Com <em>lighter</em> o texto fica mais claro que o normal.</div>	Com lighter a fonte fica menos espessa que o normal.

Além dos exemplos supracitados, esta propriedade também aceita valores numéricos de 100, 200, 300… até 900.

Tamanho da fonte

Definimos o tamanho da fonte com font-size:

Valores absolutos
<div style="font-size:xx-large">Com <em>xx-large</em> o texto fica muito maior.</div>	Com xx-large o texto fica muito maior.
<div style="font-size:x-large">Com <em>x-large</em> o texto fica maior.</div>	Com x-large o texto fica maior.
<div style="font-size:large">Com <em>large</em> o texto fica grande.</div>	Com large o texto fica grande.
<div style="font-size:medium">Com <em>medium</em> o texto fica mediano.</div>	Com medium o texto fica mediano.
<div style="font-size:small;">Com <em>small</em> o texto fica pequeno.</div>	Com small o texto fica pequeno.
<div style="font-size:x-small;">Com <em>x-small</em> o texto fica menor.</div>	Com x-small o texto fica menor.
<div style="font-size:xx-small;">Com <em>xx-small</em> o texto fica muito menor.</div>	Com xx-small o texto fica muito menor.
Valores relativos
<div style="font-size:smaller;">Com <em>smaller</em> o texto fica menor do que estava antes.</div>	Com smaller o texto fica menor do que estava antes.
<div style="font-size: inherit">Com <em>inherit</em> o texto segue o tamanho padrão do elemento ao qual ele pertence.</div>	Com inherit o texto segue o tamanho padrão do elemento ao qual ele pertence.
<div style="font-size:larger">Com <em>larger</em> o texto fica maior do que estava antes.</div>	Com larger o texto fica maior do que estava antes.

Esta propriedade também aceita valores numéricos em pixels (px), pontos (pt) e porcentagem (%).

Todas em uma

Podemos definir todas as cinco características da fonte dentro da propriedade font:

<div style="font:small-caps bold 13px 'comic sans ms';">Texto com várias propriedades em uma só.</div>	Texto com várias propriedades em uma só.
<div style="font:italic bolder 15px 'Lucida Bright';">Texto com várias propriedades em uma só.</div>	Texto com várias propriedades em uma só.

A ordem dos valores na propriedade font é: font-style | font-variant | font-weight | font-size | font-family.