How to install a Font in Drupal 7 with @font-your-face

Sometimes we need to change different typography (fonts) styles on our web site and as daunting as it seems, there’s the @font-your-face module, which permits to add any kind of typography to your web site.
I’ll show you the following steps to install and use this module:

@font-your-face features:
-    Fonts can be applied to an specific text in the web site, it can be using the Font-family identifier in the CSS file or writing a CSS selector in the @font-your-face interface directly.
-    You can import your own local fonts with the EOT, TTF, WOFF y SVG formats.

Link to install:
http://drupal.org/project/fontyourface

Install @font-your-face
-    Put the removed module in ( sites/all/modules/fontyourface) .
-    Go to a Administration » Modules and enable the @font-your-face, @font-your-face UI module and enable the required sub modules.

Example:
Google Fonts API --> provide every Google fonts.
There many more as: Fonts.com, Edgefonts and others
 
 

Other options that we can enable:
•    Local fonts: allow to apply any enable font to the theme that we are using.
•    WYSIWYG for @font-your-face : Adds a enable font list to the content editor WYSIWG.

- Go to the Administration » Appearance » @font-your-face(admin/appearance/fontyourface/browse) to enable the fonts.
- there, you look for the fonts that you need, example: Dosis. And it will show you a font list with that name.
- Below every Font there’s an option to turn it on, you may click in there, according to the fonts that you need. There’s also a disable option too.

 


 If we make click in the "fuentes preestablecidas" tab, we will note that there are the fonts that we had enabled.


If we want, we can choose specific CSS selectors. Example : H1 , H2 and others.
 

Also, when you edit any font, there’s always an option to specify the CSS selectors, separated by a comma.


 

 
2. Use the @font-your-face module through  the theme .info carpet:

- In ( /admin/appearance/fontyourface ), click in the tab “In theme” .
- It will appear a code with the fonts that you already enabled.
-Copy the code.
- Paste the code in the carpet theme.info.
- Then using the font-family identifier in the CSS file of the theme, we can apply the font that we already enabled to a specific text.

Example code:

 
3- Import local fonts.

Sometimes we can’t find the typography style that we want, that’s why @font-your-face give us the option to import local fonts.

-Go to ( /admin/config/user-interface/fontyourface/local_fonts )
-Add the font name, select the style and the font-weight.
-Upload the Font that you want to the server, It can be in EOT, .TTF, .WOFF, .SVG  format.
- Then using the font-family identifier in the CSS file of the theme, we can apply the font that we already enabled to a specific text.

We are ready now, we have different ways to add various typography styles easily to our web site.