\u00bfD\u00f3nde puedes encontrar fuentes web, qu\u00e9 fuentes son compatibles con HTML y cu\u00e1les son \u00abseguras para la web\u00bb y pueden utilizarse en cualquier sitio web? En este art\u00edculo los analizaremos todos.<\/p>\n
\u00a1Empecemos!<\/p>\n
Fuentes HTML: \u00bfQu\u00e9 Son las Fuentes Web?<\/h2>\n
Los tipos de letra tienen una rica historia, pero las fuentes, tal y como los conocemos hoy en d\u00eda, se empezaron a utilizar con el auge de los ordenadores e Internet. Las fuentes digitales necesitaban un tratamiento especial para ser reproducidas en las pantallas. Y cuando entraron en juego diferentes tama\u00f1os de pantalla y dispositivos, las cosas se complicaron a\u00fan m\u00e1s.<\/p>\n Cuando se trata de fuentes digitales, hay varios tipos diferentes. Algunas fuentes est\u00e1n pensadas principalmente para la impresi\u00f3n y el dise\u00f1o gr\u00e1fico. Suelen ser grandes e inadecuadas para los sitios web, pero son perfectas para crear gr\u00e1ficos. Tambi\u00e9n hay fuentes \u00abseguras para la web\u00bb que se encuentran en la mayor\u00eda de las m\u00e1quinas.<\/p>\n Pero para el dise\u00f1o web, lo que hay que buscar son fuentes web, tipos de letra especialmente dise\u00f1ados para que se reproduzcan perfectamente en la web y en diversos dispositivos. Tambi\u00e9n puedes utilizar fuentes web en correos electr\u00f3nicos<\/a> u otros servicios online.<\/p>\n Hay algunas cosas que hacen que las fuentes web sean diferentes de las fuentes de escritorio est\u00e1ndar que se pueden descargar. Por un lado, a menudo no se pueden utilizar con programas en el ordenador; deben cargarse en un servidor y utilizarse en la web.<\/p>\n Tambi\u00e9n est\u00e1n dise\u00f1ados para ser legibles en diferentes pantallas y para diferentes tama\u00f1os. Pueden ser estilizados con CSS<\/a> (como aplicar negrita o cursiva, colores y otros atributos) y ofrecen soporte para otras condiciones como la representaci\u00f3n de derecha a izquierda.<\/p>\n Aunque las fuentes web no vienen instaladas en tus dispositivos ni en los de tus visitantes, hay formas especiales de mostrarlas para que cualquiera que visite tu sitio pueda verlas.<\/p>\n Puedes descargar estas fuentes de forma normal y subirlas a tu servidor, o utilizar un servicio especial de alojamiento de fuentes web que las incorpore a tu sitio sin necesidad de descargarlas.<\/p>\n\n Algunas fuentes no est\u00e1n pensadas para ser utilizadas en la web, pero \u00bfcu\u00e1les pueden insertarse en tu sitio HTML?<\/p>\n B\u00e1sicamente, puedes utilizar cualquier fuente descargable en tu sitio. Todo lo que tienes que hacer es subirla y configurarla correctamente, y deber\u00eda aparecer en tu sitio web.<\/p>\n Pero, aunque t\u00e9cnicamente puedes utilizar cualquier tipo de letra en tu sitio, no siempre es la mejor idea. Hay que buscar fuentes espec\u00edficas para la web, no para la impresi\u00f3n o el dise\u00f1o gr\u00e1fico. Algunas fuentes son tan estilizadas o est\u00e1n pensadas para tama\u00f1os de texto tan grandes que no se ver\u00e1n bien en tu sitio. Con una fuente web, esto no es un problema.<\/p>\n Tambi\u00e9n hay que preocuparse por las licencias cuando se utilizan fuentes de escritorio en el sitio web (o cuando se utilizan fuentes web para el dise\u00f1o de la impresi\u00f3n). Utilizar una fuente en un medio diferente al que la has comprado puede traerte problemas. Aseg\u00farate de leer detenidamente la licencia de la fuente antes de comprarla.<\/p>\n Tambi\u00e9n puedes buscar ciertos hosts que te permitan utilizar una simple llamada en el HTML para renderizar sus fuentes en tu propio sitio web a trav\u00e9s de planes gratuitos o de pago.<\/p>\n En cualquier caso, siempre que la fuente que utilices est\u00e9 cargada correctamente<\/a> y tenga el tipo de archivo adecuado:<\/p>\n Con estos tipos de archivo de fuentes, podr\u00e1s utilizarlas en todo tu sitio y darles estilo con HTML y CSS.<\/p>\n Tambi\u00e9n hay fuentes seguras para la web que suelen funcionar de forma universal en todos los navegadores y programas.<\/p>\n Uno de los problemas de la mayor\u00eda de las fuentes web es que no hay garant\u00eda de que se muestren correctamente en tu sitio web. A diferencia del dise\u00f1o gr\u00e1fico, en el que se puede crear una imagen en un programa e imprimirla para distribuirla, un navegador<\/a> tiene que renderizar las fuentes web cada vez que alguien abre la p\u00e1gina. Si las fuentes no se cargan, el sitio web puede quedar en blanco y sin funcionar.<\/p>\n Por esta raz\u00f3n, algunos propietarios de sitios web optan por confiar \u00fanicamente en las fuentes seguras para la web<\/a>. Estas vienen preinstaladas en la mayor\u00eda de los sistemas, por lo que est\u00e1 garantizado que se muestren correctamente en todos los dispositivos, excepto en los m\u00e1s oscuros. Adem\u00e1s, suelen cargarse mucho m\u00e1s r\u00e1pido que las fuentes web, que pueden tardar en aparecer.<\/p>\n Si lo \u00fanico que te preocupa es maximizar el rendimiento y asegurarte absolutamente de que tu sitio muestra las fuentes correctamente, entonces las fuentes seguras para la web son para ti.<\/p>\n Esta es una lista de fuentes seguras para la web que generalmente se pueden utilizar.<\/p>\n Tambi\u00e9n hay docenas de fuentes m\u00e1s seguras para la web<\/a>, pero estas son las m\u00e1s omnipresentes en los dispositivos.<\/p>\n De todas ellas, Arial, Times New Roman, Helvetica y Courier New son las m\u00e1s seguras. A pesar de ser consideradas seguras para la web, algunas de las otras no funcionan en determinados sistemas operativos.<\/p>\n El problema es que, a no ser que se trate de un sitio gubernamental o de un simple sitio de informaci\u00f3n, no merece la pena sacrificar la marca evitando la mayor\u00eda de las fuentes. Las fuentes seguras para la web son legibles, pero tambi\u00e9n son demasiado gen\u00e9ricas y est\u00e1n sobreutilizadas.<\/p>\n Es mucho mejor elegir un conjunto de fuentes m\u00e1s bonitas y \u00fanicas para utilizar en tu sitio web, sobre todo porque existe una soluci\u00f3n al problema de las fuentes web que no se cargan: las fuentes de reserva.<\/p>\n Las pilas de fuentes, tambi\u00e9n conocidas como fuentes de reserva, son la \u00fanica raz\u00f3n para utilizar fuentes web atrevidas y creativas.<\/p>\n No importa lo que hagas o las precauciones que tomes, siempre hay alguien que no podr\u00e1 cargar tus fuentes. Tal vez tengan Javascript desactivado, por lo que tus fuentes alojadas no se muestran correctamente, o algo va mal en el c\u00f3digo<\/a> e impide que se muestren las fuentes que has subido. O tal vez una determinada fuente no sea compatible con el dispositivo de alguien.<\/p>\n Gracias a las fuentes de reserva<\/a>, es f\u00e1cil cargar una fuente segura para la web si algo va mal. Esto funciona seleccionando una fuente que el usuario haya instalado bas\u00e1ndose en la familia de fuentes<\/a>:<\/p>\n Recuerda que las pilas de fuentes son realmente una \u00abpila\u00bb; es perfectamente posible tener varias fuentes de reserva en secuencia. Solo tienes que asegurarte de que siempre tienes una fuente segura para la web al final de la pila, y todav\u00eda tienes la oportunidad de transmitir tu marca con una fuente similar si la principal falla.<\/p>\n Si quieres a\u00f1adir una fuente web a tu sitio, tienes algunas opciones.<\/p>\n Para los usuarios de WordPress, la forma m\u00e1s f\u00e1cil de incorporar fuentes en tu sitio es utilizar un plugin. Los dos m\u00e1s populares son Easy Google Fonts<\/a> y Use Any Font<\/a>. El primero simplifica el proceso de a\u00f1adir Google Fonts a tu sitio web, mientras que UAF te permite subir fuentes a tu sitio directamente.<\/p>\n Si no usas WordPress, o no quieres depender de un plugin, el proceso requerir\u00e1 algunos ajustes manuales.<\/p>\n En primer lugar, puedes utilizar fuentes alojadas en otro lugar, como por ejemplo en Google Fonts<\/a>. Las instrucciones aqu\u00ed dependen del servicio que elijas. Con Google Fonts, tendr\u00edas que incrustar la fuente que quieres usar en t\u00fa Tambi\u00e9n puedes alojar localmente<\/a> en tu sitio web las fuentes que hayas descargado de Internet. Esto puede ser preferible porque no tendr\u00e1s que depender de servicios de terceros.<\/p>\n Por suerte, esto es muy f\u00e1cil de hacer siempre que tengas una fuente web correctamente configurada. Solo tienes que subir los archivos a tu servidor, y luego utilizar la regla @font-face<\/a> en tu hoja de estilos para definirla. Por ejemplo:<\/p>\n A continuaci\u00f3n, puedes utilizar la etiqueta Una vez que la fuente est\u00e9 cargada de forma segura en tu sitio web, puedes darle estilo con HTML y CSS<\/a>. Incluso si tienes pocos conocimientos de programaci\u00f3n, estilizar una fuente es bastante f\u00e1cil. Puedes cambiar el color del texto, el color de fondo, el tama\u00f1o, el estilo o el peso.<\/p>\n Nota: <\/strong>Si has trabajado con versiones antiguas de HTML, puede que recuerdes la etiqueta En primer lugar, puedes cambiar la fuente con c\u00f3digos de color. Puedes usar un nombre de color<\/a> como \u00abrojo\u00bb, un c\u00f3digo RGB o un valor HEX. Esto se establece con la propiedad de O en un elemento de estilo HTML individual:<\/p>\n El color de fondo es el mismo, pero utilizando el atributo background-color.<\/p>\n Lo siguiente es el tama\u00f1o de la fuente<\/a>. Puede ser en p\u00edxeles, porcentajes o ems<\/a> (que son buenos para el dise\u00f1o de sitios responsivos).<\/p>\n O:<\/p>\n Y por \u00faltimo est\u00e1n el estilo<\/a> y el peso de la fuente, o la cursiva y la negrita. Para un texto inclinado, utiliza la etiqueta \u00abcursiva\u00bb.<\/p>\n Tambi\u00e9n puedes utilizar etiquetas HTML en su lugar. Para la cursiva, puedes utilizar:<\/p>\n para un texto que transmite el \u00e9nfasis, o el uso:<\/p>\n para un texto que pretende ser visualmente distinto.<\/p>\n Y para la negrita, usa:<\/p>\n Por ejemplo:<\/p>\n o<\/p>\n Tanto si quieres utilizar un host de fuentes de terceros como si quieres descargarlas, tienes que saber cu\u00e1les son los mejores lugares para encontrar fuentes. Hay cientos de distribuidores, pero un buen pu\u00f1ado son conocidos por ser fuentes fiables para conseguir fuentes. He aqu\u00ed algunos:<\/p>\n Hay miles de fuentes web, pero \u00bfpor d\u00f3nde empezar? Aqu\u00ed tienes diez fuentes HTML sencillas que quedar\u00e1n muy bien en cualquier sitio web. Todas ellas son seguras para la web, por lo que deber\u00edan funcionar en casi todos los dispositivos. Tambi\u00e9n son excelentes fuentes de reserva.<\/p>\n Si necesitas algo m\u00e1s emocionante, tenemos muchos art\u00edculos sobre fuentes cursivas<\/a>, fuentes caligr\u00e1ficas<\/a> y fuentes modernas<\/a>.<\/p>\n Arial es la m\u00e1s conocida de todas las fuentes. No es la m\u00e1s bonita, pero es sencilla y \u00fatil en diversas situaciones.<\/p>\n Times New Roman tambi\u00e9n es un tipo de letra muy com\u00fan. Es la mejor si se trata de un sitio m\u00e1s formal. Este tipo de letra serif no es especialmente emocionante, pero tampoco distrae.<\/p>\n Puede que Palatino te resulte familiar, ya que se utiliza a menudo en la impresi\u00f3n de libros. Ahora es un elegante tipo de letra digital incluido por defecto en muchos dispositivos.<\/p>\n Verdana es conocida por ser muy f\u00e1cil de leer, y sigue vi\u00e9ndose muy bien incluso en tama\u00f1os grandes. Esta sans serif es una buena alternativa a Arial.<\/p>\n Courier New, que recuerda al texto de las antiguas m\u00e1quinas de escribir, es un dise\u00f1o monoespaciado ideal para los sitios que desean un aspecto anticuado pero legible.<\/p>\n Calibri es una fuente sans serif sencilla y encantadora que viene de serie con programas como Microsoft Office. Sin embargo, es una fuente propietaria, por lo que a menudo solo es compatible con los sistemas operativos Windows.<\/p>\n Esta fuente serif redondeada se inspira en la fuente similar Garamond, segura para la web. Si necesitas una fuente formal no tan seria como Times New Roman, es una buena opci\u00f3n.<\/p>\n Al igual que Palatino, Garamond es una fuente cl\u00e1sica que se utiliza a menudo para la impresi\u00f3n de libros. A pesar de haber sido actualizada para los sistemas operativos modernos, sigue teniendo un aspecto bastante anticuado.<\/p>\n El m\u00ednimo espacio entre letras de esta fuente serif le da un aspecto \u00fanico. Puedes encontrarla en la mayor\u00eda de los dispositivos Apple.<\/p>\n Esta fuente limpia ha actuado como el tipo de letra por defecto para los sistemas operativos Windows m\u00e1s antiguos. Su aspecto m\u00e1s atrevido hace que destaque lo suficiente sin distraer.<\/p>\n\n Es importante elegir fuentes web que se vean bien<\/a> en tu sitio web y que sean legibles y personifiquen tu marca<\/a>. Hay varios sitios web en los que puedes instalar fuentes gratuitas o descargar otras con licencia a cambio de una cuota, y te ofrecemos algunos ejemplos de buenas fuentes para empezar.<\/p>\n No tienes por qu\u00e9 ce\u00f1irte a las aburridas fuentes seguras para la web que has visto por todo Internet durante d\u00e9cadas. Gracias a las fuentes de reserva, puedes usar la tipograf\u00eda que quieras y establecer una reserva para que se use si no se carga.<\/p>\n Tanto si utilizas estas fuentes HTML en tu sitio web, en los correos electr\u00f3nicos o en tu logotipo, aseg\u00farate de hacer muchas pruebas para que tu sitio siga siendo legible y la tipograf\u00eda encaje bien con el resto del dise\u00f1o.<\/p>\n","protected":false},"excerpt":{"rendered":" Si hay algo m\u00e1s importante para la imagen de marca y la apariencia de tu sitio web, pueden ser las fuentes. Un tipo de letra cuidadosamente …<\/p>\n","protected":false},"author":20,"featured_media":40412,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[619,664],"topic":[1358,1347],"class_list":["post-40410","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-fonts","tag-web-design","topic-diseno-sitios-web-wordpress","topic-fuentes-wordpress"],"yoast_head":"\n![\"Google](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Google-Fonts-Most-Popular-Web-Fonts.png\")
\u00bfQu\u00e9 Fuentes se Pueden Utilizar en HTML?<\/h3>\n
![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/scribble-font.png\")
\n
\u00bfQu\u00e9 Son las Fuentes Seguras Para la Web?<\/h3>\n
![\"Arial](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/arial-font.jpg\")
\n
Nota Sobre las Pilas de Fuentes<\/h3>\n
\n
C\u00f3mo A\u00f1adir Fuentes Con HTML<\/h2>\n
<head><\/code> y luego llamarla cuando quieras usarla.<\/p>\n\n@font-face {\n\nfont-family: FontName;\n\nsrc: url(FontLocationOnServer);\n\n}<\/code><\/pre>\nfont-family<\/code> para llamar a tu fuente donde quieras en el documento HTML.<\/p>\nEstilizar las Fuentes Con HTML y CSS<\/h3>\n
<font><\/code>. Esta ya no es soportada y no deber\u00eda utilizarse. En su lugar, puedes estilizar el texto con CSS o con un elemento de estilo HTML.<\/p>\ncolor<\/code> as\u00ed:<\/p>\n\np {\n\ncolor: blue;\n\n}\n\n<\/code><\/pre>\n\n<p style=\"color:blue;\">Text.<\/p>\n<\/code><\/pre>\n\np {\n\nbackground-color: blue;\n\n}<\/code><\/pre>\n p {\n\nfont-size: 16px;\n\n}<\/code><\/pre>\n<p style=\"font-size:200%;\">Text.<\/p><\/code><\/pre>\n![\"C\u00f3mo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/font-size-css.png\")
.italic {\n\nfont-style: italic;\n\n}\n\nY para la negrita:\u00a0\n\n.bold {\n\nfont-weight: bold;\n\n}<\/code><\/pre>\n![\"Establecer](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/font-style-css.png\")
<em><\/code><\/pre>\n <i> <\/code><\/pre>\n<b><\/code> or <strong><\/code><\/pre>\n<b>Bold Text<\/b><\/code><\/p>\n<strong>I'm of special importance.<\/strong><\/code><\/pre>\n\u00bfD\u00f3nde Conseguir Fuentes HTML?<\/h2>\n
\n
![\"Fuentes](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/google-fonts.jpg\")
\n
Las 10 Mejores Fuentes HTML<\/h2>\n
1. Arial<\/h3>\n
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/arial-font.png\")
2. Times New Roman<\/h3>\n
3. Palatino<\/h3>\n
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/palatino-font.png\")
4. Verdana<\/h3>\n
5. Courier New<\/h3>\n
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/courier-new-font.png\")
6. Calibri<\/h3>\n
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/calibri-font.png\")
7. Georgia<\/h3>\n
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/georgia-font.jpg\")
8. Garamond<\/h3>\n
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/garamond-font.png\")
9. Didot<\/h3>\n
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/didot-font.jpg\")
10. Tahoma<\/h3>\n
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/tahoma-font.png\")
Resumen<\/h2>\n