Les polices Web sécurisées sont des polices universellement installées sur tous les navigateurs et appareils.
Cependant, il n’existe pas de polices 100 % sécurisées pour le Web. Il y a toujours un il est possible qu'une police ne soit pas trouvée ou ne soit pas installée correctement.
Il est donc très important de toujours utiliser des polices de secours.
Cela signifie que vous devez ajouter une liste de « polices de sauvegarde » similaires dans la famille de polices propriété. Si la la première police ne fonctionne pas, le navigateur essaiera la suivante, puis la suivante, et ainsi de suite. Terminez toujours la liste par un nom de famille de polices générique.
Ici, il existe trois types de polices : Tahoma, Verdana et sans empattement. Les deuxième et troisième polices sont des sauvegardes, au cas où la première ne serait pas trouvée.
p {
font-family: Tahoma, Verdana, sans-serif;
}Essayez-le vous-même →
<!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>
La liste suivante présente les meilleures polices Web sécurisées pour HTML et CSS :
Remarque : Avant de publier votre site Web, vérifiez toujours comment votre les polices apparaissent sur différents navigateurs et appareils et utilisent toujours polices de secours !
Arial est la police la plus utilisée pour les médias en ligne et imprimés. Arial est également la police par défaut dans Google Docs.
Arial est l'une des polices Web les plus sûres et est disponible sur tous les principaux systèmes d'exploitation.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Essayez-le vous-même →
<!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 est une police très populaire. Verdana est facilement lisible même pour les petites tailles de police.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Essayez-le vous-même →
<!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>
La police Tahoma a moins d'espace entre les caractères.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Essayez-le vous-même →
<!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 a été conçu par Microsoft en 1996. Utilisez cette police avec précaution. Pas pris en charge par tous les systèmes d’exploitation mobiles.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Essayez-le vous-même →
<!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 est l’une des polices les plus reconnaissables au monde. Il semble professionnel et est utilisé dans de nombreux journaux et sites Web « d’actualités ». C'est aussi le police principale pour les appareils et applications Windows.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Essayez-le vous-même →
<!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 est une police serif élégante. Il est très lisible avec différentes tailles de police, ce qui en fait un bon candidat pour une conception adaptée aux mobiles.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Essayez-le vous-même →
<!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 est une police classique utilisée pour de nombreux livres imprimés. Il a un intemporel look et bonne lisibilité.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Essayez-le vous-même →
<!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 est la police à empattement monospace la plus utilisée. Courier New est souvent utilisé avec des affichages de codage et de nombreux fournisseurs de messagerie utilisez-la comme police par défaut. Courier New est également la police standard pour les films scénarios.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Essayez-le vous-même →
<!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>
La police Brush Script MT a été conçue pour imiter l’écriture manuscrite. Il est élégant et sophistiqué, mais peut être difficile à lire. Utilisez-le avec précaution.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Essayez-le vous-même →
<!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>
Conseil : Consultez également toutes les polices Google disponibles et comment les utiliser.