{"id":745,"date":"2024-04-24T20:41:31","date_gmt":"2024-04-24T23:41:31","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=745"},"modified":"2025-11-07T15:30:02","modified_gmt":"2025-11-07T18:30:02","slug":"fonts-no-css","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/fonts-no-css\/","title":{"rendered":"Fonts no CSS"},"content":{"rendered":"Tempo de leitura: <\/span> 4<\/span> minutos<\/span><\/span>\n

Fonts no CSS<\/strong>: A tipografia \u00e9 a espinha dorsal de qualquer conte\u00fado web. Mais do que apenas est\u00e9tica, a escolha e a estiliza\u00e7\u00e3o das fontes afetam a legibilidade, a hierarquia da informa\u00e7\u00e3o e, em \u00faltima an\u00e1lise, a experi\u00eancia do usu\u00e1rio. O CSS oferece um controle granular sobre cada aspecto do texto.<\/p>\n\n\n\n

Neste artigo, vamos mergulhar nas propriedades essenciais da fam\u00edlia font<\/code>, entender a melhor forma de usar unidades e como importar fontes personalizadas com a regra @font-face<\/code><\/strong>.<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. As Propriedades Fundamentais de font<\/code><\/h2>\n\n\n\n

O CSS permite ajustar individualmente as caracter\u00edsticas mais importantes da fonte:<\/p>\n\n\n\n

Propriedade<\/strong><\/td>Fun\u00e7\u00e3o<\/strong><\/td>Valor Recomendado<\/strong><\/td>Notas<\/strong><\/td><\/tr><\/thead>
font-family<\/code><\/strong><\/td>Define a(s) fonte(s) a ser(em) usada(s).<\/td>Lista de fontes (ex: 'Roboto', sans-serif<\/code>)<\/td>Deve sempre terminar com uma fonte gen\u00e9rica<\/strong> (serif<\/code>, sans-serif<\/code>) como fallback<\/em>.<\/td><\/tr>
font-size<\/code><\/strong><\/td>Define o tamanho do texto.<\/td>Unidades relativas (rem<\/code>, em<\/code>, vw<\/code>).<\/td>Use rem<\/code><\/strong> para acessibilidade e escalabilidade.<\/td><\/tr>
font-weight<\/code><\/strong><\/td>Define a espessura da fonte.<\/td>normal<\/code> (400), bold<\/code> (700), 900<\/code><\/td>Depende dos pesos que a fonte instalada ou importada suporta.<\/td><\/tr>
font-style<\/code><\/strong><\/td>Define o estilo da fonte.<\/td>normal<\/code>, italic<\/code>, oblique<\/code><\/td>italic<\/code> \u00e9 o mais comum, baseado na vers\u00e3o it\u00e1lica da fonte.<\/td><\/tr>
line-height<\/code><\/strong><\/td>Define o espa\u00e7amento entre linhas.<\/td>Valor sem unidade<\/strong> (ex: 1.6<\/code>)<\/td>Melhor Pr\u00e1tica:<\/strong> Valores sem unidade s\u00e3o relativos ao font-size<\/code> do pr\u00f3prio elemento, garantindo a heran\u00e7a correta.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n

\u270f\ufe0f A Propriedade font<\/code> (Shorthand)<\/h3>\n\n\n\n

Para concis\u00e3o, a maioria das propriedades de fonte pode ser combinada na propriedade shorthand<\/em> font<\/code><\/strong>:<\/p>\n\n\n\n

CSS<\/p>\n\n\n\n

\/* Sintaxe: font-style font-weight font-size\/line-height font-family *\/\n\np {\n  font: italic bold 1rem\/1.6 'Helvetica Neue', sans-serif;\n}\n\/* Isto define: font-style: italic; font-weight: bold; font-size: 1rem; line-height: 1.6; font-family: 'Helvetica Neue', sans-serif; *\/\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
\n
Nota:<\/strong> \u00c9 obrigat\u00f3rio que o font-size<\/code> e o font-family<\/code> estejam presentes no shorthand<\/em>.<\/p>\n<\/blockquote>\n\n\n\n
<\/div>\n\n\n\n
2. Fontes Web e a Regra @font-face<\/code><\/h2>\n\n\n\n
Para usar uma fonte que n\u00e3o est\u00e1 instalada no sistema do usu\u00e1rio (uma fonte personalizada), voc\u00ea deve primeiro carreg\u00e1-la usando a regra @font-face<\/code><\/strong>.<\/p>\n\n\n\n
<\/div>\n\n\n\n
Otimiza\u00e7\u00e3o e Prioridade<\/h3>\n\n\n\n
Ao importar fontes, voc\u00ea deve listar v\u00e1rios formatos de arquivo. Os navegadores modernos suportam amplamente o WOFF2<\/strong>, que oferece a melhor compress\u00e3o.<\/p>\n\n\n\n
CSS<\/p>\n\n\n\n
@font-face {\n  font-family: 'MinhaFontePersonalizada';\n  src: url('minhafonte.woff2') format('woff2'), \/* 1. Prioridade: WOFF2 (menor) *\/\n       url('minhafonte.woff') format('woff');  \/* 2. Fallback: WOFF *\/\n  font-weight: 400; \/* Define o peso espec\u00edfico desta varia\u00e7\u00e3o *\/\n  font-style: normal;\n}\n\n\/* Agora a fonte pode ser usada *\/\nh1 {\n  font-family: 'MinhaFontePersonalizada', sans-serif;\n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
\ud83c\udf10 Fontes Gen\u00e9ricas (font-family<\/code>)<\/h3>\n\n\n\n
Sua declara\u00e7\u00e3o font-family<\/code> deve sempre terminar com uma fonte gen\u00e9rica para garantir que o texto seja renderizado mesmo que nenhuma fonte espec\u00edfica seja encontrada:<\/p>\n\n\n\n