A propriedade font-family do CSS permite que se faça uma lista de prioridades de familias de fontes e/ou nomes genéricos de famílias a serem especificados para um elemento selecionado. Ao contrário da maioria das demais propriedades CSS, os valores são separados por vírgula para indicar quais são as alternativas. O Browser irá utilizar a primeira fonte da lista que for encontrada no computador, ou poderá fazer o dowload utilizando a informação contida na regra @font-face.

Programadores WEB devem sempre adicionar pelo menos uma família genérica para a lista de font-family, já que não há garantia que aquela fonte específica está instalada no computador, ou possa ser baixada pela regra @font-face. A família genérica permite o browser selecionar uma fonte aceita pelo computador, quando necessário.

É também conveniente usar de antemão a propriedade font (en-US) para definir a font-size e outras propriedades relacionadas a fonte todas de uma só vez.

  1. font-family: Define a família de fontes a ser usada para o texto. Você pode especificar várias fontes em ordem de preferência, separadas por vírgulas. Por exemplo:

font-family: Arial, Helvetica, sans-serif;
  1. font-size: Define o tamanho da fonte. Você pode usar unidades como pixels (px), ems (em), porcentagem (%) ou outras unidades. Exemplo:

font-size: 16px;
  1. font-weight: Controla a espessura da fonte. Pode ser valores como "normal," "bold," ou números para pesos específicos (por exemplo, 400 para "normal" e 700 para "bold").

font-weight: bold;
  1. font-style: Define o estilo da fonte, como "normal," "italic," ou "oblique."

font-style: italic;
  1. font-variant: Controla se o texto deve aparecer em maiúsculas ou minúsculas (ou como pequenas maiúsculas).

font-variant: small-caps;
  1. line-height: Define a altura da linha, que é o espaço vertical entre as linhas de texto. Pode ser um valor numérico ou uma porcentagem.

line-height: 1.5;
  1. text-transform: Define a transformação de texto, como "uppercase" (maiuscula), "lowercase" (minúscula) ou "capitalize" (cada palavra começa com maiúscula).

text-transform: uppercase;
  1. letter-spacing: Define o espaçamento entre caracteres (kerning).

letter-spacing: 2px;
  1. text-decoration: Define decorações de texto, como "underline," "overline," "line-through," ou "none."