# 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](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/que-es-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. ## 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](https://www.ionos.mx/digitalguide/paginas-web/diseno-web/el-poder-de-las-tipografias-modernas/). 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: ```html

Este es un texto con la webfont Roboto.

``` Consejo En nuestro artículo “[Tipografía responsiva: elige la fuente más adecuada para tu web](https://www.ionos.mx/digitalguide/paginas-web/diseno-web/tipografia-responsiva-como-elegir-la-mejor-fuente/)”, 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](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/html-tags/) que puedes utilizar para las fuentes de tus páginas web: `` y ``. Sin embargo, ambas están obsoletas desde la introducción de [HTML5](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/que-es-html5/), por lo que se recomienda manejar las fuentes en HTML mediante [CSS](https://www.ionos.mx/digitalguide/paginas-web/diseno-web/que-es-css-un-tutorial-con-lo-que-necesitas-saber/). ### `` La tag `` se utiliza para seleccionar y definir fuentes en HTML. Con varios [atributos HTML](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/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](https://www.ionos.mx/digitalguide/paginas-web/diseno-web/colores-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 `` es la siguiente: ```html .... ``` Aquí tienes un ejemplo de cómo usar esta tag: ```html HTML font Tag Este es un texto de ejemplo. ``` ### `` La tag `` 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 `` y su sintaxis es la siguiente: ```html .... ``` El siguiente ejemplo muestra el uso de la tag ``: ```html HTML font Tag Este es un texto ejemplo. ``` ## 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: ```html Tamaño de fuente El tamaño de fuente es = "1"
El tamaño de fuente es = "2"
El tamaño de fuente es = "3"
El tamaño de fuente es = "4"
El tamaño de fuente es = "5"
El tamaño de fuente es = "6"
El tamaño de fuente es = "7" ``` Para definir el color puedes seguir el siguiente ejemplo: ```html Color de fuente Este texto es color verde azulado.
Este texto es color rojo oscuro. ``` Y así puedes seleccionar la HTML Font Family adecuada: ```html HTML Font Family Lucida Console
``` 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. This is a markdown version of: [https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/html-fonts/](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/html-fonts/) for AI/LLM consumption.