diseño webWordpress

Tipografías gratis para web. Instalación y descarga directa

Hoy te traigo un artículo con una lista de tipografías gratis para que puedas usar en tu página web o blog, o simplemente para cualquiera de tus diseños.

La tipografía en el diseño web cobra un gran protagonismo, y en mi opinión es esencial escoger una tipografía que se adapte a las tendencias actuales en diseño y así poder transmitir una buena imagen de marca a nuestros usuarios.

Tradicionalmente en el diseño web había mas limitaciones en cuanto al uso de las tipografías, ya que algunas tipografías solamente se mostraban si el usuario las tenía instaladas en su ordenador. De manera que el aspecto visual no era el mismo para todos.

Por este motivo los diseñadores web han optado y siguen haciéndolo, por la utilización de las “tipografías seguras”, es decir, estableciendo las tipografías generales que todos solemos tener instaladas. Además utilizan un orden jerárquico, de forma que si el usuario no tiene la primera tipografía establecida, se le muestra la segunda, y si no, la tercera, y así sucesivamente.

SUBSCRÍBETE 

Suscríbete a una lista de personas que están interesadas en seguir obteniendo trucos de Marketing Online.

Por ejemplo: Arial, Helvetica, sans-serif

Otra opción que se ha venido utilizando, y yo de hecho sigo viendo en algunas páginas web, es la utilización de imágenes con texto para titulares, encabezados, etc. Con éste recurso pueden utilizar cualquier tipo de tipografía, con cualquier efecto, sin correr el peligro de que no se muestre a algunos usuarios. Pero esto no es recomendable por los siguiente:

  • La web tardaría mas en cargar al contener mas imágenes.
  • El texto de la imagen no sería rastreable por Google, perjudicando el SEO, y la indexabilidad del contenido.
  • El texto es mas difícil de actualizar.

Actualmente para mostrar tipografías en nuestras páginas web tenemos otros recursos como:

  • Google fonts.
  • O la propiedad CSS @font-face ( la explico al final del artículo).

 

¿Donde conseguir tipografías gratis?

Hay muchas páginas web en las que podrás encontrar tipografías gratis con mucha calidad. Aquí están los sitios que a mi mas me gustan y que mas utilizo:

Fontsquirrel: Excelente sitio web en el que podrás encontrar gran variedad de tipografías gratis parea usar en cualquier diseño. Me gusta especialmente porque se pueden encontrar tipografías muy interesantes y de calidad muy bien organizadas por categorías. Además tiene una funcionalidad llamada “Webfont Generator” que sirve para generar archivos que te servirán para subirlos a tu hosting y así poder instalar cualquier tipografía en tus páginas web.

Dafont: Dafont es sin duda otros de los sitios mas conocidos y completos para encontrar tipografías gratis. Hay una gran variedad de fuentes para todos los gustos.

1001freefonts: Otro de los sitios mas potentes para encontrar todo tipo de tipografías gratuitas. Al igual que en las dos opciones anteriores, se encuentran perfectamente categorizadas por estilos de manera que la búsqueda te resultará mas fácil.

 

¿Tipografías gratis o tipografías de pago?

No tienes mas que pasarte por la gran mayoría de sitios web de descarga de tipografías gratuitas para darte cuenta de que hay mucha “basura tipográfica”. No obstante, pienso que una tipografía no va a ser de mas calidad por ser de pago.

Hay tipografías gratuitas que son bastante buenas, al igual que tipografías de pago que son malas. No por el hecho de ser de pago, va a ser buena una tipografía.

Centrándonos en el diseño web, pienso que si que se pueden utilizar tipografías gratuitas simples y elegantes sin ningún problema. De hecho a día de hoy la mayoría de plantillas de WordPress ya incluyen Google Fonts para usar directamente. Para diseño editorial también hay alguna tipografía gratis buena, como es el caso de Gentium. No obstante si necesitas algo mas exclusivo y elaborado para tus proyectos, es mas probable que tengas que recurrir a tipografías de pago.

 

Tipografías gratis para tu web o Blog

Te dejo con un listado de tipografías gratis que me han parecido bastante interesantes y adaptadas a las últimas tendencias en diseño web y gráfico.

INTRODUCE TU EMAIL PARA DESCARGAR

Recibe tu descarga gratuita en tu email. Solo debes introducir tu email y recibirás un enlace con la descarga.
Please wait...
Loader

 

Ailerons

tipografia gratis Ailerons

Porto

Porto tipografia gratis elegante

Aku-Kamu

Aku-Kamu tipografia gratis web

Tricolore

TriColore

Uni Sans

Uni-Sans

Sunn

SUNN tipografia gratis vintage

Slot

slot

Steamster

Streamster

Rhyder

Rhyder

Geomanist

GEOMANIST

Harlott

HARLOTT

Mohave

Mohave-Typefaces

Prime

tipografías gratis

Rafale

Rafale

Color-lines

Color-Lines

Borj

Borg-Typeface

Big John y Slim Joe

Big-John-Slim-Joe tipografia gratis elegante

Baron

tipografias gratis

Aventura

AVENTURA-Free-Typeface

Aroly

aroly

Descargar el pack de tipografías gratis completo

Si te han gustado las tipografías gratis que te muestro en éste artículo, puedes descargarlas aquí:

[sf_button colour=”accent” type=”standard” size=”large” link=”http://alvaropmarketing.com/tipografias-gratis-web-2″ target=”_blank” icon=”ss-download” dropshadow=”no” extraclass=””]DESCARGAR[/sf_button]

 

 

 

¿Cómo instalar tipografías gratis o de pago en tu página web?

Te voy a mostrar un método muy simple para que puedas utilizar cualquier tipo de tipografía en tus páginas web. Si utilizas WordPress, seguramente estarás familiarizado con las posibilidades que ofrece en cuanto a tipografías para los H1, H2, H3… y párrafo. la mayoría de plantillas se integra perfectamente con Google fonts, y ofrece un desplegable donde puedes elegir directamente la tipografía de Google fonts que te guste, a parte de otras tipografías comunes.

Pero ¿Que ocurre si quieres usar otra fuente que has comprado, o algunas de las fuentes gratuitas de este artículo? Puedes hacer que se muestren con el método @font-face:

  • Entra en Fontsquirrel y haz click en la sección”generator”, situada en el menú.
  • Sube el archivo de tu tipografía, y descarga el “kit”.
  • tipografias gratis web

 

  • Abre el documento que acabas de descargar, y pega todos los archivos de las tipografías (.ttf, .eot, .woff, .woff2 y .svg) en tu hosting, dentro de la carpeta “fonts” de tu plantilla.
  • Abre el archivo stylesheet.css, copia el código, y pégalo en la sección “custom css” de tu página web. Quizá debas modificar la url y poner la ruta completa para que funcione.

tipografias gratuitas

  • Asocia la tipografía a los elementos donde quieras aplicarla, mediante código CSS. por ejemplo, para que todos los H1 tuvieran la tipografía “futura”:[sourcecode language=”plain”]h1 { font-family: “futura”, sans-serif; }[/sourcecode]

Hecho esto, debes comprobar que se ve correctamente desde otro dispositivo u ordenador en el cual no tengas instalada la tipografía, para así tener una visión real. Si no te ha funcionado, prueba especificando mas  la ruta de la tipografía en la propiedad @font-face, en el código CSS. Por ejemplo:


[sourcecode language=”plain”]
@font-face {
font-family: ‘loveloblack’;
src: url(‘/wp-content/themes/bridge/fonts/lovelo_black-webfont.eot’);
src: url(‘/wp-content/themes/bridge/fonts/lovelo_black-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘/wp-content/themes/bridge/fonts/lovelo_black-webfont.woff2’) format(‘woff2’),
url(‘/wp-content/themes/bridge/fonts/lovelo_black-webfont.woff’) format(‘woff’),
url(‘/wp-content/themes/bridge/fonts/lovelo_black-webfont.ttf’) format(‘truetype’),
url(‘/wp-content/themes/bridge/fonts/lovelo_black-webfont.svg#loveloblack’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
[/sourcecode]

Otra forma de usar tipografías gratis en tu web

Si quieres usar tus propias tipografías de forma sencilla en WordPress, puedes hacerlo utilizando un plugin llamado Use any font. Este plugin te permite importar una tipografía gratis, e instalarla para poder utilizarla en tu página web.

El problema es que únicamente te permite uns tipografía de forma gratuita. Por lo que si necesitases instalar alguna mas, deberás pagar.

 

Si te ha sido útil, te agradecería que pudieras compartirlo para que pueda ser de utilidad para otras personas. Saludos.

newsletter

SUSCRÍBETE PARA RECIBIR CONTENIDOS EXCLUSIVOS

Déjame tu email y te enviaré recursos gráficos de forma periódica para tu página web

Tipografías gratis para web. Instalación y descarga directa
5 (100%) 13 votes

Autor Álvaro Peña Costilla

Dedicado al Marketing Online y al diseño web en Tooeasy. Me gusta todo lo relacionado con las nuevas tecnologías, el diseño gráfico, el branding y la fotografía.

Mas artículos de Álvaro Peña Costilla

Join the discussion One Comment

Deja un comentario