Uso de fontes em CSS O CSS permite as seguintes propriedades aplicadas às fontes:
- font-family
- font-style
- font-variant
- font-weight
- font-size
- font
Família de fontes [font-family]A propriedade font-family é usada para definir uma lista de fontes e sua prioridade para apresentação de um elemento na página. Se a primeira fonte da lista não estiver instalada na máquina do visitante, deverá ser usada a segunda e assim por diante até ser encontrada uma fonte instalada.
Existem dois tipos de nomes para definir fontes: nomes para famílias de fontes e nomes para famílias genéricas.
nome para famílias de fontes
Exemplos para este tipo (normalmente conhecidas como "font") são "Arial", "Times New Roman" ou "Tahoma".
nome para 
Famílias genéricas são fontes que pertencem a um grupo com aparência uniforme. Um exemplo são as fontes sans-serif que englobam a coleção de fontes que "não têm pé".
Ao listar fontes para seu o seu site, comece com aquela preferida, seguindo-se algumas alternativas para ela. É recomendável encerrar a lista das fontes com uma fonte genérica. Assim fazendo, em último caso a página será apresentada com fonte da mesma família das que foram especificadas quando todas as demais estiverem indisponíveis na máquina do visitante.
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
Cabeçalhos <h1> serão apresentados com fonte "Arial". Se o visitante não tiver a font Arial instalada, aparece a fonte "Verdana". Se ambas estiverem indisponíveis será usada uma fonte da família sans-serif.
Ao especificar a fonte "Times New Roman" foram usadas aspas. Isto é necessário para fontes com nomes compostos e que contenham espaços entre os nomes.
Estilo da fonte [font-style]
A propriedade font-style define a escolha da fonte em normal, italic ou oblique. No exemplo a seguir todos as cabeçalhos <h2> serão em itálico.
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style: italic;}
Fonte variante [font-variant]
A propriedade font-variant é usada para escolher as variantes normal ou small-caps. Uma fonte small-caps é a que usa letras maiúsculas de tamanhos reduzidos.
Se a propriedade font-variant for definida para small-caps e não estiver disponível na máquina do visitante, aparece uma fonte maiúscula.
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
Peso da fonte [font-weight]
A propriedade font-weight define quão negrito ou "pesada" deverá aparecer a fonte. Uma fonte pode ser normal ou bold. Alguns navegadores suportam números de 100-900 (em intervalos de 100 em 100) para definir a font-weight p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}
Tamanho da fonte [font-size]
O tamanho da fonte é definido pela propriedade font-size.
Existem muitas unidades (p. ex.:. pixels e percentagens) que podem ser usadas para definir o tamanho da fonte, exemplos:
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Existe uma diferença entre as quatro unidades adoptadas no exemplo acima. As unidades 'px' e 'pt' são absolutas, enquanto '%' e 'em' permitem ajustar o tamanho das fontes ao seu gosto e necessidade. Muitos visitantes têm restrições, pessoas idosas, pessoas com visão limitada ou as que usam um monitor de baixa resolução. Para o site ficar acessível a todos, deve-se usar unidades como '%' ou 'em'.
A maior parte dos Browsers permitem ajustar o tamanho da fonte. 
Juntar as propriedades [font]
Usar font é uma abreviatura que permite definir várias propriedades numa só.
Veja a seguir quatro linhas de código usadas para definir propriedades de fonte para um parágrafo <p>
.
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Pode-se usar a abreviatura
Usar a abreviação simplifica o código como mostrado abaixo:
p {
font: italic bold 30px arial, sans-serif;
}
A ordem dos valores para font é:
font-style | font-variant | font-weight | font-size | font-family
|
