Fontes CSS Fallback
Fontes substitutas comumente usadas
Não existem fontes 100% totalmente seguras para a web. Há sempre uma chance de que uma fonte não seja encontrada ou não esteja instalada corretamente. Portanto, é muito importante sempre usar fontes de fallback.
Isso significa que você deve adicionar uma lista de "fontes de backup" semelhantes na propriedade font-family. Se a primeira fonte não funcionar, o navegador tentará a próxima, e a próxima e assim por diante. Sempre termine a lista com um nome de família de fonte genérico.
Abaixo estão algumas fontes de fallback comumente usadas, organizadas pelas 5 famílias de fontes genéricas:
- Serifa
- Sem serifa
- Monoespaço
- Cursiva
- Fantasia
Fontes com serifa
font-family | Example text | Code |
---|---|---|
"Times New Roman", Times, serif | This is a HeadingThis is a paragraph. |
|
Georgia, serif | This is a HeadingThis is a paragraph. |
|
Garamond, serif | This is a HeadingThis is a paragraph. |
Fontes sem serifa
font-family | Example text | Code |
---|---|---|
Arial, Helvetica, sans-serif | This is a HeadingThis is a paragraph. |
|
Tahoma, Verdana, sans-serif | This is a HeadingThis is a paragraph. |
|
"Trebuchet MS", Helvetica, sans-serif | This is a HeadingThis is a paragraph. |
|
Georgia, Verdana, sans-serif | This is a HeadingThis is a paragraph. |
Fontes Monoespaçadas
font-family | Example text | Code |
---|---|---|
"Courier New", Courier, monospace | This is a HeadingThis is a paragraph. |
Fontes Cursivas
font-family | Example text | Code |
---|---|---|
"Brush Script MT", cursive | This is a HeadingThis is a paragraph. |
Fontes de fantasia
font-family | Example text | Code |
---|---|---|
Copperplate, Papyrus, fantasy | This is a HeadingThis is a paragraph. |
Dica: confira também todas as fontes do Google disponíveis e como usá-las.