Fontes seguras para a Web são fontes instaladas universalmente em todos os navegadores e dispositivos.
No entanto, não existem fontes 100% totalmente seguras para a web. Há sempre um chance de uma fonte não ser encontrada ou não estar instalada corretamente.
Portanto, é muito importante sempre usar fontes substitutas.
Isso significa que você deve adicionar uma lista de "fontes de backup" semelhantes em a família de fontes propriedade. Se o 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 genérico de família de fontes.
Aqui, existem três tipos de fonte: Tahoma, Verdana e sem serifa. A segunda e a terceira fontes são backups, caso a primeira não seja encontrada.
p {
font-family: Tahoma, Verdana, sans-serif;
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: Tahoma, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>CSS Fallback Fonts</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
A lista a seguir apresenta as melhores fontes seguras para HTML e CSS:
Observação: Antes de publicar seu site, sempre verifique como seu as fontes aparecem em diferentes navegadores e dispositivos e sempre usam fontes substitutas!
Arial é a fonte mais usada tanto para mídia online quanto impressa. Arial também é a fonte padrão no Google Docs.
Arial é uma das fontes da web mais seguras e está disponível em todos os principais sistemas operacionais.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Verdana é uma fonte muito popular. Verdana é facilmente legível mesmo para tamanhos de fonte pequenos.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
A fonte Tahoma possui menos espaço entre os caracteres.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Tahoma, sans-serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Trebuchet MS foi desenvolvido pela Microsoft em 1996. Use esta fonte com cuidado. Não suportado por todos os sistemas operacionais móveis.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Times New Roman é uma das fontes mais reconhecidas do mundo. Parece profissional e é usado em muitos jornais e sites de "notícias". É também o fonte principal para dispositivos e aplicativos Windows.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Times New Roman', serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Georgia é uma fonte serifada elegante. É muito legível em diferentes tamanhos de fonte, por isso é um bom candidato para design responsivo a dispositivos móveis.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Georgia, serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Garamond é uma fonte clássica usada em muitos livros impressos. Tem um atemporal aparência e boa legibilidade.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Garamond, serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Courier New é a fonte serif monoespaçada mais amplamente usada. Courier New é frequentemente usado com exibições de codificação e muitos provedores de e-mail use-a como fonte padrão. Courier New também é a fonte padrão para filmes roteiros.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Courier New', monospace;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
A fonte Brush Script MT foi projetada para imitar a escrita à mão. É elegante e sofisticado, mas pode ser difícil de ler. Use-o com cuidado.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Brush Script MT', cursive;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Dica: confira também todas as Google Fonts disponíveis e como usá-las.