How to use Google Webfont loader only for specific paragraph classes?

Question

I have been using the Google Webfont loader to display parts of my website with nice fonts. I have this part work fine, all of my <p> show with the font I want. However, I would like only some classes of <p> (i.e. <p class="someclass">) to show with the webfonts, and then the rest with regular font (i.e. not Google Webfonts). What is the best way for me to achieve this? At the moment, I am using this

<script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'McLaren' ] }
      };
      (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);
      })();
    </script>
    <style type="text/css">
      .wf-loading p.someclass {
        font-family: serif
      }
      .wf-inactive p.someclass {
        font-family: cursive
      }
      .wf-active p.someclass {
        font-family: 'McLaren', cursive
      }
    </style>

and all <p> throughout the page display with the 'McLaren' font. I'm sure I am doing something dumb with the CSS selector but I'm not quite sure what.

Any help would be greatly appreciated. Thanks

Answer 1

First off you don’t necessarily need the js version of Google fonts I have just linked them through css and I have had no loading issues. Secondly, someone would need to see your body of your actual html BUT you don’t need the p prefix just add the fonts to your class .someclass{font-family:cursizve;} also like I said using css pseudo classes work better and a lot lighter on the client