jueves, 22 de noviembre de 2012

Fuentes personalizadas en CSS3.Ejemplos practicos.






 Trabajar con  fuente  personalizadas en css3.

Primero que  nada descargar  la fuente de .
Google webfont  o de el sitio de la fuente que quieras trabajar.














Segundo


@font-face   Establecer  un nombre para la fuente.
        font-family: Declarar  la fuente.
        src: url()   llamar   la fuente.

Colocando los archivos  en la misma carpeta (css/fuente descargada) podrás  personalizar las fuentes en css3.


este seria el declaro directo

<html>
<head>
<style type="text/css">
@font-face{
font-family:RibeyeMarrow-Regular;
src: url(RibeyeMarrow-Regular.ttf);
}
body{
font-family:RibeyeMarrow-Regular;
}
</style>
</head>
<body>


Mi fuente es diver

</body>
</html>



en archivos separados donde el  .html  conectara  al css


       <link rel="stylesheet" href="css/estilo.css" type="text/css"/>





@charset "utf-8";
/* CSS Document */

/*mis fuentes*/

@font-face{
font-family:BaroqueScript;
src:url(fuentes/BaroqueScript.ttf);
}

@font-face{
font-family:PlayfairDisplaySC-Black;
src:url(fuentes/PlayfairDisplaySC-Black.ttf)format('truetype');
}

@font-face{
font-family:Paprika-Regular;
src:url(fuentes/Paprika-Regular.ttf)format('truetype');
}
/* estylos */

h1{
color:#903;
font-family:Paprika-Regular;


}
p{
font-family:Paprika-Regular;
}





Usando tres tipos de fuentes en la carpeta css
 cree otra carpeta para colocar las fuentes(nombre de la carpeta fuentes )
  listo esto aplico y
declaro que usare una fuente (@font-face{)
con el nombre de(font-family:Paprika-Regular;)
 en el lugar que deberá buscar (src:url(fuentes/Paprika-Regular.ttf)format('truetype');  dandole a h1 y a p el estilo de  fuente que quiero .






Estas fuentes de Google webfont son  compatibles con todos los navegadores . Otra cosa importante al usar las fuentes es el derecho del autor debemos asegurarnos de tenerlo conjuntamente del archivo  personalizado y así evitar inconvenientes en un futuro.


Aprovechando la entrada para comentar la colocación de párrafo en  justify desde css



Algo curioso  es que no encontraba la manera de colocar un justificado en un párrafo en html5 con el css3 de esta manera la conseguí 


p{
text-align : justify;
}




Tal vez te interese .
Manifiesto html5