Algo que muchos hemos observado en la web, es que la variedad de fuentes que teníamos para crear un diseño de nuestra web eran muy pocos y aveces dificilmente quedaban como queríamos.
Hoy les traigo una herramienta que nos permite implementar fuentes de cualquier tipo en nuestra web de manera muy sencilla gracias a Font Squirrel, una pagina web que nos ayuda a crear nuestros Kits de fuentes para nuestro uso y aprovechando la propiedad de CSS @font-face.
Esta herramienta nos tiene 2 opciones que considero interesantes, una de ellas es @font-face Kits, una sección que contiene una gran cantidad de tipo de fuentes que contienen un kit de implementación.
Dentro de la sección seleccionamos la fuente que nos agrade y nos devera mostrar un demo de la fuente, en este paso nos dirigimos a @font-face kit.
Verán un boton que dice Download TTF pero este solo descargara la fuente en formato TTF y no el Kit que es el que nos interesa. Después de dar click en @font-face kit nos mostrara algo como la siguiente imagen.
Elegimos el idioma que nos interese (recomiendo English y que verifiquen que contenga los caracteres como acentos, comillas, guiones bajos o cualquier caracter raro) , tambien seleccionamos todos los formatos de fuentes como, TTF, EOT, WOFF, SVG.
Los 4 formatos son importantes, ya que cada navegador es compatible con 1 o 2 formatos de fuentes, si alguno de ellos no se implementa, el navegador no encontrara que fuente embeber y no aplicara la fuente.
Después de darle todas las opciones, descargamos el Kit con el boton Download @font-face kit.
El kit contendrá algo parecido a esto.
Los archivos de fuente TTF, EOT, WOFF, SVG los subimos a nuestro servidor en la raiz de sitio y abrimos el archivo stylesheet.css, de este archivo nos interesa el siguiente código fuente de CSS.
@font-face { font-family: 'TuFuenteDescargada'; src: url('TuFuenteDescargada.eot'); src: url('TuFuenteDescargada.eot?iefix') format('eot'), url('TuFuenteDescargada.woff') format('woff'), url('TuFuenteDescargadat.ttf') format('truetype'), url('TuFuenteDescargada.svg#webfontaBGRTKCG') format('svg'); font-weight: normal; font-style: normal; } |
Después de localizar el código lo pegamos en nuestra hoja de estilos CSS de la pagina web, en el principio y antes de cualquier código CSS.
Esta linea de codigo es la que declara el nombre de nuestra nueva fuente font-family: ‘TuFuenteDescargada’ ;
Donde TuFuenteDescargada es el nombre que usaremos en nuestras selecciones de fuente y deben escribirla exactamente como esta escrita, si no, no les funcionara, seguida de una coma y las fuentes normales que siempre hemos usado por cuestiones de alguna incompatibilidad inevitable.
font-family:'TuFuenteDescargada', Helvetica, Arial, sans-serif; |
Todo lo demás son los source de donde obtendrá las fuentes, solo que para Internet Explorer usa un Hack ya que este, cuando detecta que hay mas fuentes enlazadas deja de funcionar y no lo aplica, pero este se soluciona embebiendo otra igual con algunos caracteres después de la extensión .eot en un segundo source como .eot=iefix y los demas se aplican normales.
La segunda opción es @font-face Generator, esta opcion nos permite utilizar una fuente que ya tenemos en nuestro disco duro subiendola al servicio y Font Squirrel se encargara de armarnos un kit como que ya e explicado anteriormente para poderlo utilizar.
Aqui podemos añadir una fuente en el boton Add Fonts y elegir el tipo de paquete que queremos, pero por defecto esta la recomendable, después de esto hay que activar el check box y les aparecera el boton Download Your Kit y listo, ya tienen un kit para implementar exactamente igual al anterior.
Es muy sencillo de aplicar y ademas algo muy útil cuando necesitamos darle un cambio a las fuentes comunes, espero les sea útil este tip y lo aplique en sus sitios web.
It’s really a great and useful piece of info. I am glad that you shared this useful info with us. Please keep us informed like this. Thank you for sharing.
Hola amigo, espero puedas darme una mano, he seguido todos los pasos pero no logro ver la @fontface, solo subí la tipografía regular.¿Puede ser eso? Saludos, y gracias.
Hola Danny, cuando el sitio te genera el paquete, este lo tienes que subir casi como lo descargas, ya que diferentes motores de renderizado usan diferentes formatos, por ejemplo en móviles, el iPhone usa SVG para Safari, incluso el CSS que te da, lo puedes usar tal como esta.
Hola llevo un tiempo usando la web Font squirrel para descargar fuentes y su generador de código css y me estoy dando cuenta de un pequeño error que me gustaría que alguien me confirmara. En este caso Font squirrel cuando se descarga alguna fuente en múltiples formatos, incluido el svg hay algo que no hace bien en algunos caso, os explico: el formato svg necesita de un id para que la fuente funcione, ese id tiene que coincidir con en id que tiene dentro el archivo svg que lo podemos ver abriendo el archivo con el bloc de notas y buscando el id, pues bien. Algunas veces ese id que genera Font squirrel en el css no coincide con el id del archivo. Si se prueba la fuente por ejemplo en crhome que acepta el formato svg veréis que no se ve esa fuente que genero Font squirrel, claro está porque no puso el id correcto del archivo. ¿Alguien se ha percatado de este problema? Y así tener esto presente a la hora de usar esta herramienta. Este id del formato svg de la fuente DejaVuSerif no es correcto (comprobado).
@font-face {
font-family: 'DejaVuSerif';
src: url('fuentes/DejaVuSerif.eot');
src: url('fuentes/DejaVuSerif.eot?#iefix') format('embedded-opentype'),
url('fuentes/DejaVuSerif.woff') format('woff'),
url('fuentes/DejaVuSerif.ttf') format('truetype'),
url('fuentes/DejaVuSerif.svg#DejaVuSerif') format('svg');
}
Debe ser provocado por el sistema que genera el código, gracias por contarnos, aún así siempre tenemos la opción de modificar el código.