Las fuentes web seguras son fuentes que se instalan universalmente en todos los navegadores y dispositivos.
Sin embargo, no existen fuentes 100% seguras para la web. Siempre hay un posibilidad de que una fuente no se encuentre o no esté instalada correctamente.
Por lo tanto, es muy importante utilizar siempre fuentes alternativas.
Esto significa que debe agregar una lista de "fuentes de respaldo" similares en la familia de fuentes propiedad. Si el La primera fuente no funciona, el navegador probará con la siguiente, y con la siguiente, y así sucesivamente. Termine siempre la lista con un nombre de familia de fuentes genérico.
Aquí hay tres tipos de fuentes: Tahoma, Verdana y sans-serif. La segunda y tercera fuente son copias de seguridad, en caso de que no se encuentre la primera.
p {
font-family: Tahoma, Verdana, sans-serif;
}Pruébelo usted mismo →
<!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 siguiente lista son las mejores fuentes web seguras para HTML y CSS:
Nota: Antes de publicar su sitio web, compruebe siempre cómo Las fuentes aparecen en diferentes navegadores y dispositivos, y siempre usan fuentes alternativas!
Arial es la fuente más utilizada tanto para medios impresos como en línea. arial También es la fuente predeterminada en Google Docs.
Arial es una de las fuentes web más seguras y está disponible en todos los principales sistemas operativos.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Pruébelo usted mismo →
<!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 es una fuente muy popular. Verdana es fácilmente legible incluso con tamaños de fuente pequeños.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Pruébelo usted mismo →
<!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 fuente Tahoma tiene menos espacio entre los caracteres.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Pruébelo usted mismo →
<!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 fue diseñado por Microsoft en 1996. Utilice esta fuente con cuidado. No compatible con todos los sistemas operativos móviles.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Pruébelo usted mismo →
<!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 es una de las fuentes más reconocibles del mundo. Parece profesional y se utiliza en muchos periódicos y sitios web de "noticias". También es el fuente principal para dispositivos y aplicaciones de Windows.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Pruébelo usted mismo →
<!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 es una fuente serif elegante. Es muy legible en diferentes tamaños de fuente, por lo que es un buen candidato para el diseño adaptable a dispositivos móviles.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Pruébelo usted mismo →
<!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 es una fuente clásica utilizada para muchos libros impresos. Tiene un carácter atemporal aspecto y buena legibilidad.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Pruébelo usted mismo →
<!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 es la fuente serif monoespaciada más utilizada. Courier New se utiliza a menudo con pantallas de codificación y muchos proveedores de correo electrónico Úselo como fuente predeterminada. Courier New también es la fuente estándar para películas. guiones.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Pruébelo usted mismo →
<!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 fuente Brush Script MT fue diseñada para imitar la escritura a mano. Es elegante y sofisticado, pero puede resultar difícil de leer. Úselo con cuidado.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Pruébelo usted mismo →
<!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>
Consejo: Consulte también todas las fuentes de Google disponibles y cómo utilizarlas.