Instalar fuentes en Drupal con @font-your-face

Author Top
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.

bursa esc
bursa eskort
bursa escort bayan bursa travesti escort bursa merkez escort bursaescort bursa escort bayanlar alanya eskort bayan antalya bayan eskort havalimanı transfer