Websichere Schriftarten sind Schriftarten, die universell auf allen Browsern und Geräten installiert werden.
Es gibt jedoch keine 100 % vollständig websicheren Schriftarten. Es gibt immer eine Es besteht die Möglichkeit, dass eine Schriftart nicht gefunden wird oder nicht ordnungsgemäß installiert ist.
Daher ist es sehr wichtig, immer Ersatzschriftarten zu verwenden.
Das bedeutet, dass Sie eine Liste ähnlicher „Backup-Schriftarten“ hinzufügen sollten die Schriftfamilie Eigentum. Wenn die Wenn die erste Schriftart nicht funktioniert, probiert der Browser die nächste aus, dann die nächste und so weiter. Beenden Sie die Liste immer mit einem generischen Schriftfamiliennamen.
Hier gibt es drei Schriftarten: Tahoma, Verdana und serifenlos. Die zweite und dritte Schriftart sind Backups für den Fall, dass die erste nicht gefunden wird.
p {
font-family: Tahoma, Verdana, sans-serif;
}Probieren Sie es selbst aus →
<!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>
Die folgende Liste enthält die besten websicheren Schriftarten für HTML und CSS:
Hinweis: Bevor Sie Ihre Website veröffentlichen, überprüfen Sie immer, wie Ihre Schriftarten werden in verschiedenen Browsern und Geräten angezeigt und immer verwendet Fallback-Schriftarten!
Arial ist die am häufigsten verwendete Schriftart sowohl für Online- als auch für Printmedien. Arial ist auch die Standardschriftart in Google Docs.
Arial ist eine der sichersten Web-Schriftarten und auf allen gängigen Betriebssystemen verfügbar.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Probieren Sie es selbst aus →
<!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 ist eine sehr beliebte Schriftart. Verdana ist auch bei kleinen Schriftgrößen gut lesbar.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Probieren Sie es selbst aus →
<!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>
Die Tahoma-Schriftart hat weniger Abstand zwischen den Zeichen.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Probieren Sie es selbst aus →
<!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 wurde 1996 von Microsoft entwickelt. Verwenden Sie diese Schriftart sorgfältig. Nicht Unterstützt von allen mobilen Betriebssystemen.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Probieren Sie es selbst aus →
<!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 ist eine der bekanntesten Schriftarten der Welt. Es sieht aus professionell und wird in vielen Zeitungen und „Nachrichten“-Websites verwendet. Es ist auch das Primäre Schriftart für Windows-Geräte und -Anwendungen.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Probieren Sie es selbst aus →
<!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 ist eine elegante Serifenschrift. Es ist in verschiedenen Schriftgrößen gut lesbar und eignet sich daher gut für ein auf Mobilgeräte ansprechendes Design.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Probieren Sie es selbst aus →
<!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 ist eine klassische Schriftart, die für viele gedruckte Bücher verwendet wird. Es hat eine zeitlose Wirkung Optik und gute Lesbarkeit.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Probieren Sie es selbst aus →
<!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 ist die am weitesten verbreitete Monospace-Serifenschrift. Courier New wird häufig mit Codierungsanzeigen und vielen E-Mail-Anbietern verwendet Verwenden Sie es als Standardschriftart. Courier New ist auch die Standardschriftart für Filme Drehbücher.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Probieren Sie es selbst aus →
<!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>
Die Schriftart Brush Script MT wurde entwickelt, um die Handschrift nachzuahmen. Es ist elegant und raffiniert, kann jedoch schwer lesbar sein. Verwenden Sie es vorsichtig.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Probieren Sie es selbst aus →
<!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>
Tipp: Sehen Sie sich auch alle verfügbaren Google-Schriftarten und deren Verwendung an.