Hero

Instalar fuentes en Drupal con @font-your-face

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.

fonts css selector field

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.

Recibe consejos y oportunidades de trabajo 100% remotas y en dólares de weKnow Inc.