2

I'm trying to figure out why this isn't working:

$(document).ready(function() {
   if (fontPreference === "MavenPro") {
       $("*").css('font-family', '"Maven Pro" !important');
   }
});

I have the necessary stylesheet that holds the font... am I missing something?

Brendan
  • 37
  • 1
  • 3
  • 4
    What's `fontPreference `? – j08691 Aug 24 '15 at 16:42
  • jQuery doesn't recognize the `important!` rule. – dhouty Aug 24 '15 at 16:44
  • What do you mean, *not working* ? Is the css style being applied and subsequently over ridden? Is is just not running at all? – mituw16 Aug 24 '15 at 16:46
  • update your code with this line ` $("*").css('font-family', 'Maven Pro !important');` – J Santosh Aug 24 '15 at 16:48
  • See [this](http://stackoverflow.com/questions/2655925/how-to-apply-important-using-css) discuession here on stackoverflow. – dhouty Aug 24 '15 at 16:53
  • 1
    You're code should work. Here's a simplified fiddle : http://jsfiddle.net/hhvsLcbe/1/ Does you code go into the fontPreference logic ? – VVV Aug 24 '15 at 16:53
  • I found a different solution on my own... thanks for the feedback everyone... also why did I get a thumbs down on my question? :/ – Brendan Aug 24 '15 at 17:21

2 Answers2

4

The thing is that jQuery doesn't understand the !important attribute when using .css() but instead you can use .attr(). Like this:

$(document).ready(function() {
    $( "#selectionTest" ).change(function() {
        var fontPreference = $( "#selectionTest" ).val();
        $("body").attr('style', 'font-family:"'+fontPreference+'" !important');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testing">
    <p>This is the tekst that we will be testing on</p>
    <p style="color: red;">This p has inline styling</p>
    <select id="selectionTest">
        <option value="arial">arial</option>
        <option value="verdana">verdana</option>
        <option value="Comic Sans MS">comic sans</option>
        <option value="Mavenpro">Mavenpro</option>
    </select>
</div>
Mohammed Fahsi
  • 41
  • 2
0

$(document).ready(function() {

  $("#setfont").click(function() {
    $("body").append("<style>* { font-family:  monospace!important;}</style>");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="javascript:void(0);" id="setfont">Set font</a>

<p>Some text</p>
Majid Fouladpour
  • 29,356
  • 21
  • 76
  • 127