Si hay algo más importante para la imagen de marca y la apariencia de tu sitio web, pueden ser las fuentes. Un tipo de letra cuidadosamente elegido puede transmitir personalidad, hacer más legibles los pasajes largos de texto y consolidar tu marca en la mente de la gente.

Pero no puedes descargar cualquier fuente y utilizarla en tu sitio web. Primero hay que tener en cuenta varias cosas.

¿Dónde puedes encontrar fuentes web, qué fuentes son compatibles con HTML y cuáles son «seguras para la web» y pueden utilizarse en cualquier sitio web? En este artículo los analizaremos todos.

¡Empecemos!

Fuentes HTML: ¿Qué Son las Fuentes Web?

Los tipos de letra tienen una rica historia, pero las fuentes, tal y como los conocemos hoy en día, 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ños de pantalla y dispositivos, las cosas se complicaron aún más.

Google Fonts es una colección de fuentes web de moda

Google Fonts es una colección de fuentes web de moda

Cuando se trata de fuentes digitales, hay varios tipos diferentes. Algunas fuentes están pensadas principalmente para la impresión y el diseño gráfico. Suelen ser grandes e inadecuadas para los sitios web, pero son perfectas para crear gráficos. También hay fuentes «seguras para la web» que se encuentran en la mayoría de las máquinas.

Pero para el diseño web, lo que hay que buscar son fuentes web, tipos de letra especialmente diseñados para que se reproduzcan perfectamente en la web y en diversos dispositivos. También puedes utilizar fuentes web en correos electrónicos u otros servicios online.

Hay algunas cosas que hacen que las fuentes web sean diferentes de las fuentes de escritorio estándar 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.

También están diseñados para ser legibles en diferentes pantallas y para diferentes tamaños. Pueden ser estilizados con CSS (como aplicar negrita o cursiva, colores y otros atributos) y ofrecen soporte para otras condiciones como la representación de derecha a izquierda.

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.

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.

Si te preocupas por la marca y la apariencia de tu sitio, entonces asegurarte de usar una fuente segura para la web es un paso crucial en tu proceso de diseño. ✨ Encuentra 10 grandes opciones aquí mismo 👇Click to Tweet

¿Qué Fuentes se Pueden Utilizar en HTML?

Algunas fuentes no están pensadas para ser utilizadas en la web, pero ¿cuáles pueden insertarse en tu sitio HTML?

Básicamente, puedes utilizar cualquier fuente descargable en tu sitio. Todo lo que tienes que hacer es subirla y configurarla correctamente, y debería aparecer en tu sitio web.

El tipo de letra Scribble no es práctico para las páginas web

El tipo de letra Scribble no es práctico para las páginas web

Pero, aunque técnicamente puedes utilizar cualquier tipo de letra en tu sitio, no siempre es la mejor idea. Hay que buscar fuentes específicas para la web, no para la impresión o el diseño gráfico. Algunas fuentes son tan estilizadas o están pensadas para tamaños de texto tan grandes que no se verán bien en tu sitio. Con una fuente web, esto no es un problema.

También 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ño de la impresión). Utilizar una fuente en un medio diferente al que la has comprado puede traerte problemas. Asegúrate de leer detenidamente la licencia de la fuente antes de comprarla.

También 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és de planes gratuitos o de pago.

En cualquier caso, siempre que la fuente que utilices esté cargada correctamente y tenga el tipo de archivo adecuado:

Con estos tipos de archivo de fuentes, podrás utilizarlas en todo tu sitio y darles estilo con HTML y CSS.

También hay fuentes seguras para la web que suelen funcionar de forma universal en todos los navegadores y programas.

¿Qué Son las Fuentes Seguras Para la Web?

Uno de los problemas de la mayoría de las fuentes web es que no hay garantía de que se muestren correctamente en tu sitio web. A diferencia del diseño gráfico, en el que se puede crear una imagen en un programa e imprimirla para distribuirla, un navegador tiene que renderizar las fuentes web cada vez que alguien abre la página. Si las fuentes no se cargan, el sitio web puede quedar en blanco y sin funcionar.

Por esta razón, algunos propietarios de sitios web optan por confiar únicamente en las fuentes seguras para la web. Estas vienen preinstaladas en la mayoría de los sistemas, por lo que está garantizado que se muestren correctamente en todos los dispositivos, excepto en los más oscuros. Además, suelen cargarse mucho más rápido que las fuentes web, que pueden tardar en aparecer.

Arial es un tipo de letra común y seguro para la web

Arial es un tipo de letra común y seguro para la web

Si lo único 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.

Esta es una lista de fuentes seguras para la web que generalmente se pueden utilizar.

También hay docenas de fuentes más seguras para la web, pero estas son las más omnipresentes en los dispositivos.

De todas ellas, Arial, Times New Roman, Helvetica y Courier New son las más seguras. A pesar de ser consideradas seguras para la web, algunas de las otras no funcionan en determinados sistemas operativos.

El problema es que, a no ser que se trate de un sitio gubernamental o de un simple sitio de información, no merece la pena sacrificar la marca evitando la mayoría de las fuentes. Las fuentes seguras para la web son legibles, pero también son demasiado genéricas y están sobreutilizadas.

Es mucho mejor elegir un conjunto de fuentes más bonitas y únicas para utilizar en tu sitio web, sobre todo porque existe una solución al problema de las fuentes web que no se cargan: las fuentes de reserva.

Nota Sobre las Pilas de Fuentes

Las pilas de fuentes, también conocidas como fuentes de reserva, son la única razón para utilizar fuentes web atrevidas y creativas.

No importa lo que hagas o las precauciones que tomes, siempre hay alguien que no podrá 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ódigo e impide que se muestren las fuentes que has subido. O tal vez una determinada fuente no sea compatible con el dispositivo de alguien.

Gracias a las fuentes de reserva, es fácil cargar una fuente segura para la web si algo va mal. Esto funciona seleccionando una fuente que el usuario haya instalado basándose en la familia de fuentes:

Recuerda que las pilas de fuentes son realmente una «pila»; 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ía tienes la oportunidad de transmitir tu marca con una fuente similar si la principal falla.

Cómo Añadir Fuentes Con HTML

Si quieres añadir una fuente web a tu sitio, tienes algunas opciones.

Para los usuarios de WordPress, la forma más fácil de incorporar fuentes en tu sitio es utilizar un plugin. Los dos más populares son Easy Google Fonts y Use Any Font. El primero simplifica el proceso de añadir Google Fonts a tu sitio web, mientras que UAF te permite subir fuentes a tu sitio directamente.

Si no usas WordPress, o no quieres depender de un plugin, el proceso requerirá algunos ajustes manuales.

En primer lugar, puedes utilizar fuentes alojadas en otro lugar, como por ejemplo en Google Fonts. Las instrucciones aquí dependen del servicio que elijas. Con Google Fonts, tendrías que incrustar la fuente que quieres usar en tú <head> y luego llamarla cuando quieras usarla.

También puedes alojar localmente en tu sitio web las fuentes que hayas descargado de Internet. Esto puede ser preferible porque no tendrás que depender de servicios de terceros.

Por suerte, esto es muy fácil 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 en tu hoja de estilos para definirla. Por ejemplo:


@font-face {

font-family: FontName;

src: url(FontLocationOnServer);

}

A continuación, puedes utilizar la etiqueta font-family para llamar a tu fuente donde quieras en el documento HTML.

Estilizar las Fuentes Con HTML y CSS

Una vez que la fuente esté cargada de forma segura en tu sitio web, puedes darle estilo con HTML y CSS. Incluso si tienes pocos conocimientos de programación, estilizar una fuente es bastante fácil. Puedes cambiar el color del texto, el color de fondo, el tamaño, el estilo o el peso.

Nota: Si has trabajado con versiones antiguas de HTML, puede que recuerdes la etiqueta <font>. Esta ya no es soportada y no debería utilizarse. En su lugar, puedes estilizar el texto con CSS o con un elemento de estilo HTML.

En primer lugar, puedes cambiar la fuente con códigos de color. Puedes usar un nombre de color como «rojo», un código RGB o un valor HEX. Esto se establece con la propiedad de color así:


p {

color: blue;

}

O en un elemento de estilo HTML individual:


<p style="color:blue;">Text.</p>

El color de fondo es el mismo, pero utilizando el atributo background-color.


p {

background-color: blue;

}

Lo siguiente es el tamaño de la fuente. Puede ser en píxeles, porcentajes o ems (que son buenos para el diseño de sitios responsivos).

 p {

font-size: 16px;

}

O:

<p style="font-size:200%;">Text.</p>
Cómo ajustar el tamaño de la fuente mediante CSS

Cómo ajustar el tamaño de la fuente mediante CSS

Y por último están el estilo y el peso de la fuente, o la cursiva y la negrita. Para un texto inclinado, utiliza la etiqueta «cursiva».

.italic {

font-style: italic;

}

Y para la negrita: 

.bold {

font-weight: bold;

}
Establecer el estilo de la fuente usando CSS

Establecer el estilo de la fuente usando CSS

También puedes utilizar etiquetas HTML en su lugar. Para la cursiva, puedes utilizar:

<em>

para un texto que transmite el énfasis, o el uso:

 <i> 

para un texto que pretende ser visualmente distinto.

Y para la negrita, usa:

<b> or <strong>

Por ejemplo:

<b>Bold Text</b>

o

<strong>I'm of special importance.</strong>

¿Dónde Conseguir Fuentes HTML?

Tanto si quieres utilizar un host de fuentes de terceros como si quieres descargarlas, tienes que saber cuáles son los mejores lugares para encontrar fuentes. Hay cientos de distribuidores, pero un buen puñado son conocidos por ser fuentes fiables para conseguir fuentes. He aquí algunos:

¿Alojando tus propias fuentes? Nuestro alojamiento de rendimiento optimizado incluye una CDN compatible con HTTP/2, con ancho de banda gratuito incluido. Consulta nuestros planes

Fuentes de Google

Fuentes de Google

Las 10 Mejores Fuentes HTML

Hay miles de fuentes web, pero ¿por dónde empezar? Aquí tienes diez fuentes HTML sencillas que quedarán muy bien en cualquier sitio web. Todas ellas son seguras para la web, por lo que deberían funcionar en casi todos los dispositivos. También son excelentes fuentes de reserva.

Si necesitas algo más emocionante, tenemos muchos artículos sobre fuentes cursivas, fuentes caligráficas y fuentes modernas.

1. Arial

Un ejemplo de la fuente Arial.

Un ejemplo de la fuente Arial.

Arial es la más conocida de todas las fuentes. No es la más bonita, pero es sencilla y útil en diversas situaciones.

2. Times New Roman

Times New Roman también es un tipo de letra muy común. Es la mejor si se trata de un sitio más formal. Este tipo de letra serif no es especialmente emocionante, pero tampoco distrae.

3. Palatino

Un ejemplo de la fuente Palantino.

Un ejemplo de la fuente Palantino.

Puede que Palatino te resulte familiar, ya que se utiliza a menudo en la impresión de libros. Ahora es un elegante tipo de letra digital incluido por defecto en muchos dispositivos.

4. Verdana

Verdana es conocida por ser muy fácil de leer, y sigue viéndose muy bien incluso en tamaños grandes. Esta sans serif es una buena alternativa a Arial.

5. Courier New

Un ejemplo de la fuente Courier New.

Un ejemplo de la fuente Courier New.

Courier New, que recuerda al texto de las antiguas máquinas de escribir, es un diseño monoespaciado ideal para los sitios que desean un aspecto anticuado pero legible.

6. Calibri

Un ejemplo de la fuente Calibri.

Un ejemplo de la fuente Calibri.

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.

7. Georgia

Un ejemplo de la fuente Georgia

Un ejemplo de la fuente Georgia

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

8. Garamond

Un ejemplo de la fuente Garamond

Un ejemplo de la fuente Garamond

Al igual que Palatino, Garamond es una fuente clásica que se utiliza a menudo para la impresión de libros. A pesar de haber sido actualizada para los sistemas operativos modernos, sigue teniendo un aspecto bastante anticuado.

9. Didot

Un ejemplo de la fuente Didot.

Un ejemplo de la fuente Didot.

El mínimo espacio entre letras de esta fuente serif le da un aspecto único. Puedes encontrarla en la mayoría de los dispositivos Apple.

10. Tahoma

Un ejemplo de la fuente Tahoma.

Un ejemplo de la fuente Tahoma.

Esta fuente limpia ha actuado como el tipo de letra por defecto para los sistemas operativos Windows más antiguos. Su aspecto más atrevido hace que destaque lo suficiente sin distraer.

Asegúrate de que tu sitio no solo tiene un buen aspecto sino que también funciona correctamente con la ayuda de estas fuentes seguras para la web ✨Click to Tweet

Resumen

Es importante elegir fuentes web que se vean bien en tu sitio web y que sean legibles y personifiquen tu marca. 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.

No tienes por qué ceñirte a las aburridas fuentes seguras para la web que has visto por todo Internet durante décadas. Gracias a las fuentes de reserva, puedes usar la tipografía que quieras y establecer una reserva para que se use si no se carga.

Tanto si utilizas estas fuentes HTML en tu sitio web, en los correos electrónicos o en tu logotipo, asegúrate de hacer muchas pruebas para que tu sitio siga siendo legible y la tipografía encaje bien con el resto del diseño.


Si te ha gustado este artículo, entonces te encantará la plataforma de alojamiento WordPress de Kinsta. Acelere su sitio web y obtenga soporte 24/7 de nuestro experimentado equipo de WordPress. Nuestra infraestructura potenciada por Google Cloud se centra en la escalabilidad, el rendimiento y la seguridad. ¡Permítanos mostrarle la diferencia de Kinsta! Conozca nuestros planes