Descarga la hoja de trucos HTML definitiva<\/a><\/p> Las fuentes seguras para la Web son fuentes que vienen preinstaladas en la mayoría de los sistemas operativos. Esto garantiza que las fuentes se muestren como es debido cuando se accede a ellas desde distintos dispositivos y navegadores.<\/p> Los ejemplos más populares de fuentes seguras para la web son Arial<\/strong>, Times New Roman <\/strong>y Helvetica<\/strong>.<\/p> En tipografía, cada fuente es miembro de una de las cinco familias de fuentes, clasificadas según sus similitudes de diseño. Estos son los tipos de letra HTML:<\/p> Las fuentes cursivas <\/strong>imitan la escritura a mano y suelen tener las letras unidas entre sí de forma enlazada y fluida.<\/p> Mucha gente asocia este tipo de letra con la individualidad, la expresión y la caligrafía. <\/p> Es mejor utilizar este tipo de letra para encabezados, eslóganes y títulos de entradas de blog en tu sitio web, que para el cuerpo del texto. Cuando se utiliza como fuente predeterminada, la cursiva puede ser difícil de leer.<\/p> La familia tipográfica Fantasy <\/strong>suele presentar atributos decorativos en cada letra. Populares entre las obras de ficción, los tipos de letra de este conjunto tipográfico pueden ayudar a comunicar instantáneamente su género y sumergir al público.<\/p> Por ejemplo, esta categoría de fuentes se utiliza mucho en películas de fantasía y ciencia ficción como Star Wars, Harry Potter y Frozen.<\/p> El atributo de estilo más destacado de las fuentes Serif es la presencia de pequeños trazos adicionales en los bordes de las letras. Aunque inicialmente se utilizó para imprimir con tinta, este estilo de letra se asocia ahora con un sentido de formalidad y elegancia.<\/p> Los sitios web utilizan principalmente Serif para el cuerpo del texto, ya que es muy legible y ayuda a los lectores a hojear rápidamente el contenido escrito.<\/p> Las fuentes Serif <\/strong>más populares son Times New Roman<\/strong>, Cambria <\/strong>y Garamond<\/strong>.<\/p> Como contrapartida a la categoría de fuentes con gracias, las fuentes Sans-serif <\/strong>no muestran trazos adicionales unidos a sus letras.<\/p> La mayoría de las fuentes de esta familia tienen anchuras similares, por lo que parecen modernas y minimalistas.<\/p> Las fuentes sin gracias son legibles en cualquier tamaño, lo que las convierte en una gran elección tanto para contenido impreso como para uso digital.<\/p> Todas las letras y símbolos de las fuentes Monospace <\/strong>tienen <\/strong>la misma anchura.<\/p> Como los tipos de letra son coherentes y fáciles de distinguir, suelen ser el tipo de letra por defecto de las máquinas de escribir y los terminales informáticos.<\/p> A continuación encontrarás las 20 mejores tipografías HTML seguras para la web que puedes aplicar a tu contenido.<\/p> Arial <\/strong>es una fuente sans-serif versátil con un aire contemporáneo. Cada letra es gruesa y robusta, consiguiendo un aspecto limpio y minimalista.<\/p> Arial ha sido una fuente de pantalla básica debido a su legibilidad cuando se escala a cualquier tamaño. De hecho, es la fuente predeterminada de Google Docs<\/a>.<\/p> Además, este tipo de letra también es popular en medios impresos como periódicos y anuncios.<\/p> En general, si buscas una fuente clásica que sea adecuada para la mayoría de los sitios web, Arial es una gran elección.<\/p> Arial Narrow <\/strong>es uno de los 38 estilos de la familia tipográfica Arial. Comparado con el tipo de letra original, este estilo ofrece un diseño mucho más elegante.<\/p> Las letras aparecen estrechas y condensadas, con poco espacio entre ellas. Esto hace que Arial Narrow sea una gran elección para sitios web minimalistas.<\/p> Las mejores opciones para combinar fuentes son los tipos de letra sans-serif más atrevidos, como Verdana <\/strong>y Geneva<\/strong>.<\/p> Times <\/strong>es un tipo de letra con gracias muy legible por su contraste visible y su estilo condensado.<\/p> La gente suele estar familiarizada con esta fuente, ya que se encuentra en diversos medios, desde libros y aplicaciones de mensajería hasta proyectos editoriales comerciales.<\/p> Originalmente, Times se utilizaba principalmente en medios impresos como los periódicos, asociándose desde entonces con el periodismo y la escritura académica.<\/p> Por lo tanto, esta fuente es la elección perfecta para crear una sensación familiar y formal en tu sitio web.<\/p> Además, esta fuente es adecuada para sitios web con bloques de texto largos, como redacciones y blogs en línea.<\/p> Times New Roman <\/strong>es una variación de la fuente Times <\/strong>del tipo de letra serif.<\/p> Es un tipo de letra de texto muy utilizado en medios impresos como revistas y libros, pero también es una fuente muy popular en HTML debido a su versatilidad y legibilidad.<\/p> Con su estilo de fuente profesional, Times New Roman se ha convertido en la opción favorita para el contenido formal que se encuentra en publicaciones de noticias y sitios web educativos.<\/p> Helvetica <\/strong>es una fuente HTML versátil, ya que su diseño limpio es adecuado para cualquier tipo de pantalla.<\/p> Es un popular tipo de letra sans serif utilizado por muchas marcas de renombre. Por ejemplo Jeep<\/a>, Microsoft<\/a>, Motorola<\/a> y BMW<\/a> utilizan este tipo de letra para sus logotipos.<\/p> Aparte de eso, el gobierno de EE.UU. también utiliza Helvetica en sus formularios de impuestos.<\/p> Además, este tipo de letra está diseñado para usos de pequeño tamaño, como el texto que se muestra en lectores electrónicos y dispositivos móviles.<\/p> Courier <\/strong>es el tipo de letra más famoso de la clasificación de las serifs planas: todos los sistemas operativos vienen preempaquetados con él.<\/p> Esta fuente HTML también ha sido un estándar para los guiones cinematográficos. Por lo tanto, si tu sitio web está relacionado con el cine, considera definitivamente añadir Courier al diseño de tu sitio.<\/p> Sin embargo, como esta fuente está clasificada como decorativa, es mejor limitar su uso a encabezados y títulos.<\/p> Este tipo de letra es una alternativa más fina y legible que Courier<\/strong>. Por eso, los dispositivos electrónicos utilizan principalmente Courier New<\/strong>.<\/p> Además, esta fuente también está clasificada como una tipografía de máquina de escribir, por lo que queda muy bien en sitios web con diseños de la vieja escuela.<\/p> Courier New está disponible en cuatro estilos: normal, cursiva, negrita y negrita cursiva.<\/p> Verdana <\/strong>es un tipo de letra excelente en pantalla debido a su legibilidad en tamaño pequeño y cuando se muestra en pantallas de baja resolución. Esto se debe principalmente a su generosa anchura y espaciado entre caracteres.<\/p> Sin embargo, este tipo de letra no se limita a la tipografía en pantalla. Por ejemplo, la famosa marca de muebles IKEA<\/a> utiliza Verdana tanto en su sitio web como en sus catálogos impresos.<\/p> Si buscas una fuente HTML con una gran legibilidad, esta fuente es una gran elección.<\/p> Candara <\/strong>se introdujo por <\/strong>primera vez en el sistema operativo Microsoft Vista para mejorar la legibilidad en las pantallas LCD.<\/p> Este tipo de letra es muy legible gracias al generoso espaciado entre caracteres, lo que la convierte en una fuente de pantalla perfecta.<\/p> Además, Candara consigue un aspecto contemporáneo gracias a sus curvas y formas abiertas. <\/p> Esta fuente es adecuada para entornos tipográficos informales, como títulos de entradas de blog y eslóganes en sitios web.<\/p> Ginebra <\/strong>ofrece un aspecto limpio y moderno gracias a su longitud, anchura y espaciado uniformes. Se trata de una fuente versátil y muy utilizada tanto para mostrar como para el cuerpo del texto. <\/p> Los colores vivos y los trazos finos hacen que esta fuente sea legible en cualquier tamaño: ofrece un espaciado generoso con una longitud consistente para garantizar la legibilidad.<\/p> Calibri <\/strong>es un tipo de letra muy utilizado y popular. Es la fuente predeterminada de varios programas conocidos, como el paquete Microsoft Office y Google Docs. Esta fuente resulta sobre todo moderna y cálida por sus líneas redondeadas y su estilo limpio.<\/p> Además, Calibri funciona en una amplia variedad de tamaños de texto. Es muy legible y adecuado tanto para pantallas digitales como para pantallas. Gracias a su diseño limpio, esta fuente se adapta a todo tipo de sitios web.<\/p> Optima <\/strong>se <\/strong>inspira en las mayúsculas romanas clásicas. Se utiliza para transmitir elegancia con su generoso espaciado y sus trazos complementarios. Con Optima, también tienes la opción de definir el espaciado entre cada carácter.<\/p> Aunque todas las variantes de espaciado son legibles, establecer un espaciado más ancho complementará mejor este tipo de letra.<\/p> Óptima es mejor para usos de visualización, como en logotipos de marcas de gama alta como Estée Lauder<\/a> y Marks and Spencer<\/a>.<\/p> Con espaciado y proporciones muy uniformes, Cambria <\/strong>se diseñó para una gran experiencia de lectura en pantalla, incluso cuando se muestra en tamaños pequeños.<\/p> Este tipo de letra es muy legible gracias a sus gracias horizontales, que enfatizan mucho los finales de cada trazo.<\/p> Además, Cambria es muy versátil. Puedes combinar sus diferentes estilos de fuente y utilizarla para cabeceras, títulos y cuerpo de texto.<\/p> Esta fuente está disponible en las variantes normal, negrita, cursiva y negrita cursiva.<\/p> Garamond <\/strong>se <\/strong>clasifica como una serif de estilo antiguo. Es un tipo de letra clásico muy utilizado tanto en impresos como en pantallas digitales, incluida la gama de libros del Dr. Seuss, los volúmenes de Harry Potter y el logotipo de Google.<\/p> Esta fuente es la mejor para añadir un matiz antiguo y atemporal a tu sitio web.<\/p> Perpetua <\/strong>es formal, clásica y elegante. La fuente fue creada por un escultor inglés influido por los monumentos y las letras conmemorativas.<\/p> Las características de esta fuente animaron a Penguin Classics<\/a> y a la Universidad de Pensilvania<\/a> a incluir a Perpetua en sus publicaciones.<\/p> En definitiva, una página educativa o informativa puede beneficiarse mucho de este tipo de letra.<\/p> Monaco <\/strong>es la fuente que aparece en las aplicaciones Terminal y Xcode de macOS X. Esta fuente pertenece al grupo de familias monospace y presenta un diseño acentuado y pixelado.<\/p> Debido a su estilo distintivo, Mónaco se utiliza mejor en el texto decorativo de sitios web sobre codificación o juegos.<\/p> Didot <\/strong>es <\/strong>una fuente neoclásica: tiene un diseño clásico con un toque moderno. El diseño único de la fuente se puede encontrar en CBS News<\/a> y The Late Show with Stephen Colbert.<\/p> Este tipo de letra es conocido por su alto contraste y su mayor acentuación, lo que hace que destaque. Si buscas un tipo de letra para el encabezamiento, el eslogan o los títulos de tu sitio web, considera Didot.<\/p> Brush Script <\/strong>es <\/strong>una fuente script de aspecto moderno, informal y desenfadado.<\/p> Presenta un estilo caligráfico basado en técnicas de escritura a mano. Por eso, Brush Script MT se traduce en una fuente de visualización bella pero legible para tu sitio web.<\/p> Esta fuente es ideal para páginas de aterrizaje y ventanas emergentes de boletines en sitios web. Debido a la naturaleza de sus elementos, asegúrate de utilizar esta fuente con moderación y en tamaño grande.<\/p> Lucida Bright <\/strong>se <\/strong>clasifica como un tipo de letra con gracias. Es una de las versiones de la fuente Lucida con más contraste.<\/p> El tipo de letra estrecho permite un uso eficaz del espacio y puede ser estupendo para informes empresariales, documentaciones o revistas.<\/p> Un usuario famoso de este tipo de letra es la revista Scientific American<\/a>.<\/p> Copperplate <\/strong>pertenece al grupo monótono y sólo tiene mayúsculas. Se utiliza mejor como fuente para tarjetas de visita y membretes.<\/p> En una página web, esta fuente puede ser una gran opción para encabezados y títulos.<\/p> Este tipo de letra se hizo famoso después de que Who Wants To Be A Millionaire <\/strong>la utilizara en su marca comercial.<\/p> Comic Sans <\/strong>se basaba <\/strong>en la letra de las revistas de cómics y pretendía ser amistosa y desenfadada.<\/p> Sin embargo, muchos consideran este tipo de letra poco profesional e infantil. Incluso hay una comunidad que apoya la prohibición de Comic Sans<\/a> como fuente.<\/p> La razón por la que este tipo de letra resulta desagradable a la vista es su escasa gestión de la coherencia visual. Las letras carecen de uniformidad en espaciado, anchura y altura.<\/p> Utilizar una fuente web HTML es crucial para tu diseño web<\/a>. Garantiza que el texto de tu sitio web sea coherente en todos los dispositivos.<\/p> Sin una fuente web HTML, corres el riesgo de perder visitantes, ya que tus fuentes pueden aparecer como símbolos ilegibles cuando se accede a ellas desde dispositivos no compatibles.<\/p> Aquí algunas razones por las que deberías utilizar una fuente HTML para tu sitio web:<\/p> Hay un par de formas de añadir fuentes HTML en WordPress. En esta sección, repasaremos dos métodos populares:<\/p> Añadir fuentes manualmente es una gran opción si quieres evitar los plugins o deseas añadir una fuente personalizada<\/a> a tu sitio de WordPress.<\/p> Primero, selecciona y descarga una fuente personalizada de un proveedor de fuentes web como Adobe Fonts, TypeNetwork o Fonts.<\/p> Una vez que hayas elegido, convierte la fuente a un formato apto para la web. Puedes utilizar el Generador Webfont<\/a> para conseguirlo.<\/p> Cuando hayas descargado el archivo, súbelo al directorio wp-content\/themes\/your-theme\/fonts<\/strong>.<\/p> Añadir fuentes manualmente utilizando HTML puede ser un reto, ya que la etiqueta HTML <font> <\/strong>es una etiqueta de fuente obsoleta en HTML5. En su lugar, ahora se utilizan propiedades CSS<\/a> para cambiar las propiedades de familia de fuente, color, cara y otros atributos de fuente.<\/p> Un método popular para dar más estilo a tu fuente es utilizar CSS en línea. Añade estilos a un único elemento HTML con un atributo de estilo CSS.<\/p> Aquí tienes un ejemplo de lo que puede parecer el CSS en línea como elemento HTML:<\/p> Añadir manualmente HTML puede resultar confuso y abrumador para los principiantes. Por eso, aprender los conceptos básicos de CSS y HTML puede ser útil.<\/p> Hay muchos plugins disponibles para añadir fuentes HTML a tu sitio web de WordPress. Sin embargo, te vamos a sugerir uno de los mejores plugins. <\/p> Use Any Font (UAF)<\/a><\/p> Con este plugin, sube cualquier fuente personalizada y UAF la convertirá automáticamente en una fuente segura para la web.<\/p> Una vez que hayas instalado el plugin, aparecerá la pestaña Usar cualquier fuente <\/strong>en la barra de administración de WordPress. Haz clic en ella y activa tu clave API<\/a>.<\/p> Una vez completada la verificación, añade tus archivos de fuentes .ttf<\/strong>, .otf <\/strong>y .woff <\/strong>y haz clic en cargar para que la UAF convierta las fuentes personalizadas en fuentes seguras para la web.<\/p> Además, UAF también es compatible con Flatsome para la personalización de fuentes en vivo en Temas Flatsome.<\/p>¿Qué es una fuente segura para la Web?<\/h2>
¿Cuáles son las categorías de fuentes HTML?<\/h2>
Cursiva<\/h3>
![\"Fuente](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2024\/07\/cursiva.png\")
<\/figure><\/div>Fantasy<\/h3>
![\"Fuente](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2024\/07\/fantasy.png\")
<\/figure><\/div>Serif<\/h3>
![\"Fuente](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2024\/07\/serif.png\")
<\/figure><\/div>Sans-serif<\/h3>
![\"Fuente](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2024\/07\/sans-serif.png\")
<\/figure><\/div>Monospace<\/h3>
![\"Fuente](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2024\/07\/monospace.png\")
<\/figure><\/div>Las 20 mejores fuentes HTML seguras para la web<\/h2>
1. Arial<\/h3>
![\"Fuente](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2019\/10\/arial.png\")
<\/figure><\/div>2. Arial Narrow<\/h3>
![\"Tipo](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2019\/10\/arial-narrow-fuente.png\")
<\/figure><\/div>3. Times<\/h3>
![\"Fuente](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2019\/10\/times-fuente.png\")
<\/figure><\/div>4. Times New Roman<\/h3>
![\"Fuente](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2019\/10\/times-new-roman-fuente.png\")
<\/figure><\/div>5. Helvética<\/h3>
![\"Fuente](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2019\/10\/helvetica-fuente.png\")
<\/figure><\/div>6. Courier<\/h3>
![\"Tipo](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2019\/10\/courier-fuente.png\")
<\/figure><\/div>7. Courier New<\/h3>
![\"Courier](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2019\/10\/courier-new-fuente.png\")
<\/figure><\/div>8. Verdana<\/h3>
![\"Fuente](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2019\/10\/verdana-fuente.png\")
<\/figure><\/div>9. Candara<\/h3>
![\"Tipografía](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2019\/10\/candara-fuente.png\")
<\/figure><\/div>10. Ginebra<\/h3>
![\"Tipo](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2019\/10\/geneva-fuente.png\")
<\/figure>11. Calibri<\/h3>
![\"Tipografía](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2019\/10\/calibri-fuente.png\")
<\/figure><\/div>12. Optima<\/h3>
![\"Tipo](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2019\/10\/optima-fuente.png\")
<\/figure><\/div>13. Cambria<\/h3>
![\"Diseño](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2019\/10\/cambria-fuente.png\")
<\/figure><\/div>14. Garamond<\/h3>
![\"Diseño](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2019\/10\/garamond-fuente.png\")
<\/figure><\/div>15. Perpetua<\/h3>
![\"perpetua-fuente\"](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2019\/10\/perpetua-fuente.png\")
<\/figure><\/div>16. Monaco<\/h3>
![\"Fuente](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2019\/10\/monaco-fuente.png\")
<\/figure>17. Didot<\/h3>
![\"Diseño](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2019\/10\/didot-fuente.png\")
<\/figure><\/div>18. Brush Script<\/h3>
![\"Diseño](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2019\/10\/brush-script-mt-fuente.png\")
<\/figure><\/div>19. Lucida Bright<\/h3>
![\"Lucida](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2019\/10\/lucida-bright-fuente.png\")
<\/figure><\/div>20. Copperplate<\/h3>
![\"Fuente](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2019\/10\/copperplate-fuente.png\")
<\/figure><\/div>Mención deshonrosa: Comic Sans<\/h3>
![\"Fuente](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2019\/10\/comic-sans.jpg\")
<\/figure><\/div>¿Por qué deberías utilizar una fuente web HTML?<\/h2>
\n
Cómo añadir fuentes HTML en WordPress<\/h2>
Cómo añadir fuentes HTML manualmente<\/h3>
<h1 style=”color:red;”>Inline CSS in Red<\/h1>\n<p style=”font-family:Calibri; color:yellow;”>This is a paragraph in yellow text color.<\/p><\/pre>
Cómo añadir fuentes HTML mediante plugins<\/h3>
![\"PLugin](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2024\/07\/Use-Any-Font-UAF.png\")
<\/figure>
![\"\"](\"https:\/\/blog.hostinger.io\/mx-tutoriales\/wp-content\/uploads\/sites\/39\/2024\/06\/ES-New-WP_in-text-banner.png\")
<\/a><\/figure><\/div>