Uma família de fontes é um grupo de fontes que compartilham um design comum. Todas as fontes que pertencem à mesma família são baseadas na mesma tipografia principal, mas também possuem variações em seu estilo, peso e largura. Você pode pensar neles como irmãos que compartilham características semelhantes e também têm algumas diferenças. Por exemplo, Arial é uma família de fontes que inclui variações como Arial Bold e Arial Italic. <img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/what-are-font-families-and-how-do-they-work-1.png" alt="Diagram showing 'Arial' at the top with two blue arrows pointing down to 'Arial Bold' on the left and 'Arial Italic' on the right, illustrating font family variations" /> No CSS, você pode definir a família da fonte com a propriedade font-family. Aqui está um exemplo de como definir a fonte do parágrafo para Arial:

<link rel="stylesheet" href="styles.css">
<p id="arial-font">Example paragraph using Arial font.</p>
<p>Paragraph not using Arial font.</p>

#arial-font {
  font-family: Arial;
}

Mas e se a família de fontes não for encontrada? Você pode especificar múltiplas famílias de fontes em ordem de prioridade, da mais alta para a mais baixa, separando-as por vírgulas. Essas fontes alternativas funcionarão como opções de fallback. Neste exemplo, Arial é uma fonte primária e Lato é uma fonte alternativa:

<link rel="stylesheet" href="styles.css">
<p id="specified-font">Example paragraph using specified fonts.</p>
<p>Paragraph not using specified fonts.</p>

#specified-font {
  font-family: Arial, Lato;
}

O navegador irá renderizar a primeira fonte (Arial) se ela for encontrada no dispositivo. Caso contrário, a segunda fonte (Lato) será renderizada. Você também deve saber como esse processo funciona nos bastidores. O processo de seleção não para se a primeira fonte estiver disponível. A família de fontes é escolhida um caractere por vez, então se uma fonte não tiver um caractere específico, o navegador o procura nas fontes de prioridade inferior. Interessante, não é? No contexto do desenvolvimento web, você também encontrará famílias genéricas de fontes. Eles são muito importantes. Uma família de fontes genérica é uma fonte padrão que os navegadores web irão renderizar quando as fontes de prioridade mais alta não estiverem disponíveis. Para garantir que o conteúdo ainda seja legível, o navegador substitui a fonte original pela fonte mais apropriada encontrada, com base na família de fontes genérica especificada. Alguns dos mais comumente usados são:

• serifa
• sem serifa
• monoespaçado
• cursiva
• fantasia

Mas há mais opções para escolher. No código abaixo, temos três famílias de fontes alternativas:

<link rel="stylesheet" href="styles.css">
<p id="specified-font">Example paragraph using specified fonts.</p>
<p>Paragraph not using specified fonts.</p>

#specified-font {
  font-family: Arial, Lato, sans-serif;
}

Arial tem a maior prioridade. Se Arial não for encontrado, então o navegador tentará renderizar Lato. Se nenhum for encontrado, o navegador usará a família de fontes genéricas sans-serif, selecionando uma fonte com essas características dentre as instaladas no sistema do usuário. Você deve sempre incluir uma família de fontes genérica no final da lista de font-family. Tenha em mente que a fonte genérica pode parecer diferente da fonte que você originalmente imaginou no seu design, então é sempre útil verificar como essas fontes de fallback aparecem em diferentes navegadores. Para tornar a experiência do usuário o mais consistente possível, também é recomendado usar fontes web-safe. Essas famílias de fontes geralmente estão instaladas na maioria dos dispositivos, então é muito provável que sejam encontradas e renderizadas corretamente para a maioria dos usuários. You'll learn more about them in the next lessons. Famílias de fontes são essenciais no mundo do design web. Usando a propriedade font-family, você pode transformar instantaneamente a aparência e o estilo do seu texto.