Usar tipografías personalizadas en tu sitio web

¿Estás harto de crear sitios web usando sólo arial y helvetica? ¿o de tener que usar imágenes cuando quieres utilizar otra tipografía? ... xD qué simple, ok... ya hay miles de tutoriales de cómo "embedear" tipografías pero están en inglés así que aquí va uno en español, y es muy fácil.

1. Entrar a http://www.fontsquirrel.com/fontface/generator y usar el generador de @font-face kit
2. De los archivos que se bajan necesitarás los de tipo .eot, .svg, .woff y .ttf.
3. Copia el texto de la hoja de estilos generada pero presta especial atención a la línea que tiene el archivo .svg, este debes subirlo a la  primera línea.

@font-face {
    font-family: 'ComfortaaRegular';
    src: url('comfortaa-regular-webfont.eot');
    src: /** aqui hay que poner la línea del .svg **/
         url('comfortaa-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('comfortaa-regular-webfont.woff') format('woff'),
         url('comfortaa-regular-webfont.ttf') format('truetype'),
         url('comfortaa-regular-webfont.svg#ComfortaaRegular') format('svg');  /**esta línea la subes**/
    font-weight: normal;
    font-style: normal;
}

¿por qué mover la línea? ¡Porque así saldrá la tipografía con antialiasing en chrome!
4. No olvides subir a tu server las fuentes.
5. Se utiliza como cualquier tupografía, mandándola llamar en los estilos, por ejemplo:
h1 {
      font-family: ComfortaRegular;
}

¡Cualquier duda en los comments! :D