lunes, 20 de mayo de 2013

fontsquirrel como instarlas en un paso a paso





fontsquirrel  como instalamos tal paquete .
Sitio de descarga 

Buscamos la fuente que  mas nos guste .


desde  

descargamos 



"Estas son la que funcionan para la web   ok "



Que tenemos 
1-  licencia .
2-Demo.
3-instalación para windows.

*
*

después tenemos 4 archivos  mas  son los que se pegaran el la carpeta del  proyecto
 donde tienes las  fuentes  con la que estas trabajando .
 .

*
*


4-eot 
5-svg
6-ttf
7-woff



y por ultimo el css
stylesheet

que contiene el  código  mágico .







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

}




vamos a llevarnos estos hasta el estilo.css  de nuestro  proyecto  .


 copiamos y  pegamos  arriba  (en primer lugar )


Por  costumbre  separa  todo  por carpetas una de estas  la llame   fuentes  por el css   del  las url  del  código  encamino con rutas relativas de esta manera .




@font-face {
    font-family: 'RedressedRegular';
    src: url('../fuentes/Redressed-webfont.eot');
    src: url('../fuentes/Redressed-webfont.eot?#iefix') format('../embedded-opentype'),
         url('../fuentes/Redressed-webfont.woff') format('woff'),
         url('../fuentes/Redressed-webfont.ttf') format('truetype'),
         url('../fuentes/Redressed-webfont.svg#RedressedRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

El nombre de la fuente es   RedressedRegular  puede cambiarlo  por el que quiera  la broma es usar  el  mismo   despues .

otra cosa  las fuentes  están en formato adecuado para los distintos  navegadores


EOT.   Internet Explorer.
WOFF.   Firefox  ,Internet Explorer .
TTF.    Safari .
SVG .   Moviles    Iphone   y   Ipad   etc .



Listo esto solo queda aplicarlo al    H1   al    H2


de esta manera



header h1{
    font-family: "RedressedRegular";
}





;)