0

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

Fred
  • 13
  • 3

1 Answers1

0

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

Pablo Claus
  • 5,886
  • 3
  • 29
  • 38
Dnaso
  • 1,335
  • 4
  • 22
  • 48
  • thanks, I just removed the p and it worked just fine. I wonder why I didn't try that in the first place... – Fred Aug 23 '12 at 12:03
  • yeah sorry for the late reply haven't been on, some browsers are weird and some css syntax is weird you just have to play around with it. – Dnaso Nov 07 '12 at 19:11