DocRaptor Does Google Web Fonts Part 2 – Electric Boogaloo

In my original Google Web Fonts post, I gave a simple example of using Google Web Fonts via their CSS downloads. This post deals with using Google Web Fonts via javascript. Yay!

I’m going to pull the js example from the Webfont Loader page. It is reproduced below. Note: I have altered the sample to remove some CSS rules to make it easier to follow.

    <script type="text/javascript">
      WebFontConfig = { google: { families: [ 'Tangerine', 'Cantarell' ] } };
      (function() { 
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
    <style type="text/css">
      .wf-active p { font-family: 'Tangerine', serif }
      .wf-active h1 { font-family: 'Cantarell', serif; font-size: 16px; }
    <h1>This is using Cantarell</h1>
    <p>This is using Tangerine!</p>

If you’re using the DocRaptor gem example from the DocRaptor Examples repo, you could change the PDF block to look like this (assuming you had saved the above html to a file named google-fonts-js.html in the directory with doc_raptor_gem_example.rb):"google-fonts-js.pdf", "w+") do |f|
  f.write DocRaptor.create(:document_content =>"google-fonts-js.html"),
                           :name => "google-fonts-js.pdf",
                           :document_type => "pdf",
                           :test => true,
                           :javascript => true)

After running the file through ruby, you should end up with a PDF named google-fonts-js.pdf that looks like this (caveat: I bumped up the font size, centered the text, and turned off test mode for this picture):

Generated PDF Image

More beautiful fonts in your PDFs with ease!

* The HTML
* The PDF produced