title: Dynamically load google fonts after page has loaded
body: <p>I would like to be able to have the user select which font they would like the page to be displayed in.  <a href="https://developers.google.com/fonts/docs/webfont_loader" rel="noreferrer">Here</a> is the way that Google recommends you do it using JavaScript.  </p>
  
  <pre><code>WebFontConfig = {
      google: {
          families: ['Tangerine', 'Cantarell']
      }
  };
  
  (function() {
          var wf = document.createElement('script');
          wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
              '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
          wf.type = 'text/javascript';
          wf.async = 'true';
          var s = document.getElementsByTagName('script')[0];
          s.parentNode.insertBefore(wf, s);
        })();
  </code></pre>
  
  <p>How can I modify this so that I can re-get fonts after the page has loaded?</p>