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.

Hosting
Hosting de primera al mejor precio
  • 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>
html
Consejo

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>
html

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>
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>
html

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>
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>
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>
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>
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.

Dominios web
Compra y registra tu dominio ideal
  • 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
¿Le ha resultado útil este artículo?
Ir al menú principal