Kit de fuentes para @font-face con Fontsquirrel

Quieres usar tus fuentes personalizados en tu web?, ¿batallas para que tus fuentes se vean en todos los navegadores y no sabes armar tu font-face? Con Fontsquirrel podrás tener tu kit de fuentes con unos sencillos pasos!

Durante un proyecto que realicé para un Dashborad de nube, el usuario era fanático de las fuentes que hacía en sus PSDs y quería todo tal cual venia en su diseño, para lo cual me proporcionó todas las fuentes que uso en su diseño.

Encontré sitios que me ayudaron cómo armar mi font-face para que pudiera cargar los archivos .ttf y .eot para Internet Explorer pero era demasiado tedioso estar convirtiendo estos archivos en ttf a eot a svg y woff. Así que dí con este maravilloso sitio que me resuelve la vida con sólo importar el archivo ttf y el mismo me da todos lo que necesito y a un mas, el código armado del @font-face!!

Te mostraré lo rápido y fácil que es usar FontsSquirrel. Primero seleccionar tu archivo del fuente .ttf y sigue los pasos.



Después de generar el kit debe ir cargando de esta manera


Una vez terminado se descarga tus archivos comprimidos.


Al abrirlos verás como están todos los formatos listo para subirlos a tu directorio web y lo interesante es que viene la hoja de estilos ya con el font-face armado.



Asi mismo al abrir el archivo verás lo siguiente

Código :

@font-face {
    font-family: 'kondolarbold';
    src: url('kondolar-bold.eot');
    src: url('kondolar-bold.eot?#iefix') format('embedded-opentype'),
         url('kondolar-bold.woff') format('woff'),
         url('kondolar-bold.ttf') format('truetype'),
         url('kondolar-bold.svg#kondolarbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

Listo para hacer copy & paste a tu CSS3. Como viste, fácil y rápido con solo un archivo. Espero que sea útil para ti.

Buena suerte!

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.