Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Up with the Google Fonts Module

Parent Feed: 

After being alerted to Google Fonts, the Google Font API, and the Google Fonts Module in a recent Drupal Planet post (http://acquia.com/blog/robert/google-fonts-api-time-drupal-market-one-day), I dropped my lunch and said, "Rad!" Then I rolled up the sleeves and dropped a few fonts into my blog as easy as the dog drops logs on the lawn. What follow is usage notes and examples on getting this all going for yourself:

References right up front:

and then a walkthrough:

  1. Download the Google Fonts Module from http://drupal.org/project/Google_fonts
  2. Enable your new modules (admin/build/modules/list). Make sure you enable both Google Fonts and Google Fonts Ui.

  3. Enable your desired fonts on the Google Fonts admin page (admin/settings/Google_fonts). Here you will find a list of all the available Google Fonts with a checkbox to select desired font. For my example I am enabling Droid Sans Mono and Lobster. When you have made your choices click 'Save configuration'.

  4. Add the font to an element via CSS in two different ways:
    • • use the font directly in your stylesheet (.node h2{ font-family: "Droid Sans Mono"; }) I have not tried this because, this next way is easier
    • • or add a rule via the 'Add rules' tab (admin/settings/Google_fonts/rules). Here you will find textareas for each font that you previously selected. Enter your CSS selectors here to get going. In my example I am selecting for the dateline and the custom made tag marquee view at the bottom of my page.

Now check out my handy work in the dateline on all posts, and at the bottom of the page using the funky Lobster font on my Tag Marquee.

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web