HTML Fonts: cómo utilizar fuentes seguras para la web
Las HTML Fonts te permiten dar un toque personalizado al contenido de tus páginas web. Para una mayor facilidad de uso, se deben utilizar siempre fuentes seguras para la web.
¿Qué tipos de fonts HTML existen?
En teoría, existe una gran variedad de tipos de fuentes HTML. Dado que HTML no proporciona en sí ninguna fuente, puedes utilizar cualquier fuente en tus páginas web, siempre y cuando se suba y configure correctamente. Sin embargo, pueden surgir varios problemas, por ejemplo, que las fuentes muy detalladas y con muchos adornos no se muestren como se desee. Esto no solo afecta negativamente al diseño de la página, sino que también disminuye la legibilidad. Además, si una fuente en HTML no está instalada en el equipo del usuario que accede a la página, también pueden surgir problemas.
- 3x más rápido, ahora un 60 % de ahorro
- Alta disponibilidad >99.99 %
- Solo en IONOS: hasta 500 GB incluidos
Fonts HTML seguras para la web
Si estás buscando fuentes adecuadas para tu página web, deberías optar por fuentes seguras para la web. Estas vienen preinstaladas en la mayoría de los sistemas o están disponibles como webfonts a través de servidores públicos. Esto garantiza que no haya problemas de visualización y que tu página se muestre de manera uniforme en diferentes navegadores y sistemas operativos.
Fuentes seguras para la web
Las fuentes seguras para la web son aquellas que están preinstaladas en la mayoría de los dispositivos y sistemas operativos. Entre las fuentes más conocidas se encuentran:
- Arial
- Courier New
- Helvetica
- Times New Roman
- Georgia
- Verdana
Estas fuentes se utilizan regularmente y ofrecen una alta compatibilidad.
Webfonts
Además de las fuentes preinstaladas, también puedes utilizar webfonts. Las webfonts se cargan desde servidores públicos y ofrecen una amplia gama de estilos tipográficos. Un proveedor conocido de webfonts es Google Fonts. Al usar este tipo de fuentes, puedes personalizar el diseño de tu página web sin comprometer la compatibilidad. Aquí tienes un ejemplo de cómo integrar una webfont:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<p>Este es un texto con la webfont Roboto.</p>
</body>
</html>En nuestro artículo “Tipografía responsiva: elige la fuente más adecuada para tu web”, profundizamos en cómo funcionan las webfonts, así como en sus ventajas.
¿Qué tags se pueden usar para las fonts HTML?
Existen dos HTML tags que puedes utilizar para las fuentes de tus páginas web: <font> y <basefont>. Sin embargo, ambas están obsoletas desde la introducción de HTML5, por lo que se recomienda manejar las fuentes en HTML mediante CSS.
<font>
La tag <font> se utiliza para seleccionar y definir fuentes en HTML. Con varios atributos HTML puedes definir el color, el tamaño y la fuente. Estos son los atributos y sus valores permitidos:
| Atributo | Valores | Descripción |
|---|---|---|
color
|
Nombre del color, código hexadecimal del color o valores RGB | Determina el color del texto |
size
|
Valor numérico del 1 al 7 | Determina el tamaño de las HTML Fonts |
face
|
Nombres de las HTML Fonts | Guarda la HTML Font Family deseada |
La sintaxis de <font> es la siguiente:
<font size=" " color=" " face=" "> ....</font>Aquí tienes un ejemplo de cómo usar esta tag:
<!DOCTYPE html>
<html>
<head>
<title>HTML font Tag</title>
</head>
<body>
<font size="3" color="0000FF" face="arial, sans-serif">
Este es un texto de ejemplo.
</font>
</body>
</html><basefont>
La tag <basefont> funciona de manera similar. Esta define la HTML Font Family y sus especificaciones, pero para todo el documento HTML. Sus atributos son los mismos que los de la tag <font> y su sintaxis es la siguiente:
<basefont size=" " color=" " face=" "> ....</font>El siguiente ejemplo muestra el uso de la tag <basefont>:
<!DOCTYPE html>
<html>
<head>
<title>HTML font Tag</title>
</head>
<body>
<basefont size="3" color="0000FF" face="arial, sans-serif">
Este es un texto ejemplo.
</font>
</body>
</html>Definir el tamaño, el color y la HTML Font Family
Desde HTML5, las tags mencionadas en los apartados previos ya no se utilizan. No obstante, es posible definir las fonts HTML para tu página web según tus preferencias particulares. Si deseas ajustar el tamaño de la fuente, puedes hacerlo como en el siguiente ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Tamaño de fuente</title>
</head>
<body>
<font size = "1">El tamaño de fuente es = "1"</font><br />
<font size = "2">El tamaño de fuente es = "2"</font><br />
<font size = "3">El tamaño de fuente es = "3"</font><br />
<font size = "4">El tamaño de fuente es = "4"</font><br />
<font size = "5">El tamaño de fuente es = "5"</font><br />
<font size = "6">El tamaño de fuente es = "6"</font><br />
<font size = "7">El tamaño de fuente es = "7"</font>
</body>
</html>Para definir el color puedes seguir el siguiente ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Color de fuente</title>
</head>
<body>
<font color = "#008080">Este texto es color verde azulado.</font><br />
<font color = "#8B0000">Este texto es color rojo oscuro.</font>
</body>
</html>Y así puedes seleccionar la HTML Font Family adecuada:
<!DOCTYPE html>
<html>
<head>
<title>HTML Font Family</title>
</head>
<body>
<font face = "Lucida Console" size = "5">Lucida Console</font><br />
</body>
</html>En el caso en el que una persona que visite tu página no tenga instalada la HTML Font Family correspondiente, se mostrará una fuente predeterminada.
- Tu dominio protegido con Certificado SSL Wildcard gratis
- Función Domain Connect para una configuración DNS simplificada gratis
- Registro privado y gratis para mayor seguridad