Utiliza cualquier tipografía en tu página web

Actualmente es muy simple agregar tipografías populares a nuestros sitios web, servicios como Google Fonts hacen de esta tarea algo muy simple. Sin embargo existen ocasiones en que el catálogo de Google Fonts pueda parecernos algo limitado.

Si este llega a ser tu caso te compartimos este sencillo paso a paso para utilizar casi cualquier tipografía en tu página web.

Paso 1. Elige y descarga la tipografía que deseas.

Primero elegiremos la tipografía que más nos guste, en este caso yo la buscaré en Dafont.com pero existen muchos servicios donde pueden descargar fuentes de forma gratuita. Para mí este sitio tiene muy buenas opciones y por lo regular siempre me ha funcionado, pero pueden usar el de su preferencia.

2. Convertir la tipografía en Webfont

Este paso es súper importante, es necesario que las fuentes cumplan este proceso para poder estar listas y se puedan apreciar en un sitio web. Para hacer esto utilizaremos otro servicio popular Fontsquirrel.com este sitio además de ofrecer un Generador de Webfonts cuenta con un catálogo interesante de tipografías, muchas de ellas incluso ya han sido convertidas a Webfonts y sólo es cuestión de descargarlas e implementarlas en nuestro sitio.

Ya estando en el sitio de Font Squirrel hacemos clic en el link que dice Generator.

A continuación haremos clic en el botón "Upload Fonts" para subir nuestra fuente (en este paso ya habremos descargado y descomprimido la fuente de Dafont.com para poder subirla).

Una vez que haya terminado el proceso terminamos de elegir nuestras opciones, "Optimal" es la más recomendable ya que por lo regular es la más aceptada por los navegadores. Es importante hacer clic en el "Agreement" donde aseguramos que no estamos usado ninguna fuente de manera ilegal.

A continuación procedemos a descargar nuestra fuente.

3. Implementación

Ya que hemos descargado nuestra fuente debemos descomprimir el archivo .zip en esta carpeta encontraremos los siguientes archivos:

• tu-fuente.eot
• tu-fuente.woff
• tu-fuente.woff2
• tu-fuente.svg

Junto a estos archivos habrán un par de archivos de texto con instrucciones y un archivo con nombre stylesheet.css, los archivos anteriores deben de colocarse en nuestro servidor, generalmente se colocan en '/assets/fonts/' pero se pueden colocar en cualquier carpeta, lo importante es declarar la ruta de estos archivos en relación a nuestra hoja de estilos.

También debemos de copiar y pegar en nuestra hoja de estilos las propiedades declaradas en stylesheet.css, es ahí donde colocares las rutas de los archivos como aparece a continuación.

/*
 * Declaramos la configuracion de la fuente
 */
@font-face {
    /*Asignamos el nombre de la fuente*/
    font-family: 'dry_brushregular';
    /*Colocamos la ruta de las fuentes en tu servidor*/
    src: url('archivos/fuentes/dry_brush-webfont.eot');
    src: url('archivos/fuentes/dry_brush-webfont.eot?#iefix') format('embedded-opentype'),
         url('archivos/fuentes/dry_brush-webfont.woff2') format('woff2'),
         url('archivos/fuentes/dry_brush-webfont.woff') format('woff'),
         url('archivos/fuentes/dry_brush-webfont.ttf') format('truetype'),
         url('archivos/fuentes/dry_brush-webfont.svg#dry_brushregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
/*
 * Asignamos la fuente via propiedad font-family a cualquier elemento
 * en este caso sera H1
 */
 
 h1.tipografia-especial {
  font-family: 'dry_brushregular'; 
 }

Luego asignamos la clase '.tipografía-especial' o el selector que hayamos elegido para nuestra tipografía y lo colocamos en nuestro HTML así:

<h1 class="tipografia-especial">Tu texto</h1>

Si hicimos todo correctamente la fuente deberá verse correctamente, y con algunos ajustes podremos hacer diseños tan elaborados como queramos.