Logotipo de Xitrus.
sígueme en facebook

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Twitter

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.

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.

  1. @font-face{
  2. font-family:[Nombre de la tipografía];
  3. src:url([Ruta de la tipografía]);
  4. }

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:
  1. <span class="tipo">En un lugar muy lejano<span>


El código CSS:
  1. @font-face{
  2. font-family:handlee;
  3. src:url('fonts/handlee.ttf');
  4. }
  5. span.tipo{
  6. font-family:handlee;
  7. font-size:22px;
  8. }


Comentarios

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Twitter

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.
Cerrar sesión
Usuario: Contraseña: