You are here

Cool module: @font-your-face

Want to have access to a large array of cool, creative fonts via the UI, which you can apply to a variety of CSS styles across your site?  Yes, you say?  Welcome to the wonderful world of @font-your-face, this month's cool module!

Step-by-step on using the module

Here's how it works (click on the images below if you want to see a full-sized version):

  1. Enable the @font-your-face module, its UI interface and whatever font packages you want to have access to

     
  2. Go to Administration->Appearance -> @Font-your-face and select the 'Browse all fonts' sub-tab.
     
  3. Tab through all the font packages you installed in Step #1 and enable the fonts you'll want to use on your site

     
  4. Once you've enabled all the fonts you may want to use on your site, change to the 'Enabled fonts' tab, where you can set the CSS selectors you want the various fonts to apply to!
    (Note that you can choose 'other' and the module will provide a textbox, in which you can enter a custom css class that your theme provides)

     
  5. Save your font-to-css selections!
    Note that if you have pages with inline styles, etc, these settings may not apply.  These properties may be overridden when a more specific font style is encountered!

     
  6. And here is the final result of my new font style choices (it's a little much, wouldn't you say?).  Also, sorry for demo-ing this on an empty site - there isn't much to look at.  You probably will be applying the fonts to specific css classes that your themes, views, etc use, not to site-wide h1 and h2 elements like I did in this demo, but you get the idea!!

 

Permissions

The module comes with its own specific permissions, so just make sure you grant the "administer @font-your-face" permission to any role you want to be able to do all of the above!

Test it out risk-free

The module itself has a handy-dandy link to test this out using Simplytest.me: http://simplytest.me/project/fontyourface/7.x-2.x.  Go ahead and launch a test Drupal site and go through the steps above to see how easy it is.  Just remember that you have 30 minutes to play around in your on-demand test environment. 

I wrote a blog about how to use Simplytest.me for quick tests and presentations, if the above sounds new and confusing to you!

Good luck, enjoy this cool module, and let me know if you have any thoughts or comments below.

 

Share

Comments

Hi Boriana,
I bought a theme and there was this module enabled. I don't like extra external fonts. From performance perspective they are another data transferred and another requests for server.

Jasom
http://www.jasom.net/

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.