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
Comentarios
Publicar un comentario