Enero 08, 2013
ssayegh
Muchas veces queremos cargar diferentes estilos de tipografías (fuentes) en nuestro sitio web y parece difícil de lograr pero para ello existe el módulo @font-your-face, el cual permite agregar cualquier tipo de tipografía a tu sitio Web.
Les mostraré los pasos para instalar y utilizar este módulo.
Características de @font-your-face:
-Las fuentes pueden ser aplicadas a un texto en específico en el sitio ya sea usando utilizando el identificador font-family en el archivo CSS del tema, o escribiendo un selector CSS directamente en la interfaz de @font-your-face.
-Puedes importar tus propias fuentes locales con los formatos, EOT, TTF, WOFF y SVG. Como un PLUS! les dejo por aquí también el sitio para convertir fonts a estos formatos: http://fontface.codeandmore.com/index.php
Link para instalarlo:
http://drupal.org/project/fontyourface
1. Instalar @font-your-face
-Colocar el módulo extraido a ( sites/all/modules/fontyourface) .
-Ir a Administration » Modules y Habilitar el modulo @font-your-face, @font-your-face UI y habilitar los submodulos necesarios.
Ejemplo:
Google Fonts API —> provee todos los fonts de Google.
Hay muchos otros como: Fonts.com, Edgefonts, etc.
Otras opciones que podemos habilitar:
-
Local Fonts : nos permite aplicar cualquier font habilitado en el tema que estamos utilizando.
-
WYSIWYG for @font-your-face : Agrega una lista de fonts habilitados al editor de contenido WYSIWYG.
\
- Ir a Administration » Appearance » @font-your-face (admin/appearance/fontyourface/browse) para habilitar fonts.
- Aqui buscamos los fonts que necesitamos por nombre, ejemplo: Dosis. Y nos muestra la lista de fonts con ese nombre.
- Abajo de cada fuente hay una opción de activar, aqui hacemos click de acuerdo a los fonts que necesitamos, también nos da la opción de desactivar.
Si hacemos click a a la pestaña de “fuentes preestablecidas”, notaremos que ahí se encuentran los fonts que hemos habilitado.
Si queremos, podemos elegir selectores específicos de CSS. Ejemplo : H1 , H2 , etc.
También al editar algúna fuente nos da la opción de especificar selectores de CSS, separados por comas.
2-Usar el modulo @font-your-face por medio de la carpeta theme .info :
- En ( /admin/appearance/fontyourface ) , hacer click en la pestaña de “In theme”.
- Nos va a aparecer un código con los fonts que tenemos habilitados.
- Copiamos el código.
- En nuestra carpeta theme.info pegamos el código.
- Luego utilizando el identificador font-family en el archivo CSS del tema podemos aplicar la fuente que habilitamos a un texto en específico.
Ejemplo del código:
3-Importar Fonts locales
Muchas veces no encontramos el estilo de tipografía (fuente) que queremos, por lo que @font-your-face también nos da la opción de importar fuentes locales.
- Ir a ( /admin/config/user-interface/fontyourface/local_fonts )
- Agregamos el nombre de la fuente, seleccionamos el estilo y font-weight.
- Subimos al servidor la fuente deseada, puede ser de tipo: .EOT, .TTF, .WOFF, .SVG .
- Luego utilizando el identificador font-family en el archivo CSS del tema podemos aplicar la fuente que habilitamos a un texto en específico.
Listo, ahora tenemos diferentes métodos para agregar varios estilos de tipografía de una forma fácil y sencilla a nuestro sitio web.