Font-Face
Cambiaremos fácilmente la tipografía en nuestras páginas web.
Las fuentes o tipografías son un elemento básico del diseño, por ese motivo actualmente se pueden implementar en nuestra página gracias a
@font-face, que coge la tipografía de un archivo (
.ttf,
.otf o
.eor) y por suerte es compatible con casi todos los navegadores más usados.
En un lugar muy lejano
En un lugar muy lejano
Como usarlo
La función
@font-face hay que establecerla al principio del documento
CSS, para que nuestros estilos puedan usar correctamente la tipografía que establezcamos.
Para incluir una nueva tipografía tenemos que usar de una forma algo distinta en
CSS la propiedad
@font-face, usándola por separado a los demás estilos y abriendo llaves después, donde dentro debemos de especificar la ruta a la fuente y el nombre que le daremos.
- @font-face{
- font-family:[Nombre de la tipografía];
- src:url([Ruta de la tipografía]);
- }
El formato adecuado
Existen varios formatos distintos, los más importantes, por ser prácticamente obligatorio usarlos simultáneamente si queremos que funcione bien una fuente son el
.ttf y el
.eot (este último es el único que lee IE).
Conseguir las tipografías
Las tipografías las encontramos en muchas webs, y la mayoría son gratuitas (un lugar de donde las podemos descargar es el
catálogo de fuentes de Google), pero suelen ser de formato
.ttf, y para convertirlas a
.eot tenemos que recurrir a distintas páginas web que te las convierten online al instante (
www.kirsle.net).
Agregar la tipografía a nuestro estilo
Tras haber establecido los
@font-face podemos agregar la fuente a un estilo como agregamos cualquier otra, usando la propiedad
font-family y añadiendo el nombre de la fuente dentro (el mismo nombre que hemos establecido en el
@font-face).
El ejemplo de arriba tendría el siguiente código:
El código
HTML:
- <span class="tipo">En un lugar muy lejano<span>
El código
CSS:
- @font-face{
- font-family:handlee;
- src:url('fonts/handlee.ttf');
- }
- span.tipo{
- font-family:handlee;
- font-size:22px;
- }
Sígueme
Buscar
Cargando
Lo último del blog
Hosting
Xitrus está alojado en:
