Up with the Google Fonts Module

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.


Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

hey my name is arun i had

hey my name is arun

i had done all the steps that you have mentioned but i am unable to access google fonts in my text area

What should i do?

Thanks for reading the

Thanks for reading the writeup, arun. Could you be a little more specific about which text area you are talking about.

Thanks for writing this up.

Thanks for writing this up. Excellent.

-Robert Douglass

By the way, point 5 isn't

By the way, point 5 isn't true. The Google Fonts UI module creates a CSS file for the user with the rules you entered in the interface. Disabling the module after you added the rules (and flush the cache), has the effect that the Google Fonts won't be applied anymore.

Thank you, I have corrected

Thank you, I have corrected the post to remove the last step, in which I had falsely stated that you could safely turn off the Google Fonts UI module once all fonts were selected. I got lazy and stopped at step 4 during my write-up.

Thanks for the blog post

Thanks for the blog post timb, I really appreciate it.
In the next release, I'll include all sorts of Bold and Italics as well!

Kind regards, Baris Wanschers (BarisW)

I really don't see a

I really don't see a difference, perhaps there is a permission so anonymous users see the fonts?

Nice tutorial non the less, :)

Anyone else not seeing the

Anyone else not seeing the fonts? Maybe it is time for you to upgrade the old Netscape :P

I checked this on a number of platforms with a number of browsers and didn't see a problem. The dateline isn't very obvious, but the scrolling marquee at the very bottom should stand out.

Dig it! Why are there not

Dig it! Why are there not more fonts? Are these across most platforms?

The fonts available on the

The fonts available on the Google Font config page are all the fonts so far available, though there are variants that you can access via css for bolds and italics versions of a few of the fonts. For an example please see: http://code.Google.com/webfonts/family?family=Cantarell#variants

Do you know how those

Do you know how those variants be used with this module?

Currently, you cannot use the

Currently, you cannot use the variants via the Google Fonts UI module, but the author of the module (Baris Wanschers) replied above that he is working towards integrating these.

I believe that you can access these by putting a rule into your css file to access it. I will leave this as an exercise to the commenter, but I do believe the Google Fonts page has descent info.

Post new comment

  • Allowed HTML tags: <em> <strong>
  • Lines and paragraphs break automatically.

More information about formatting options

Enter the characters shown in the image.