How can my script change a Specific Font (for a specific class)?

I'm trying to make my own Tampermonkey script to change a specific font style on a specific site from a cursive style to a sans-serif style.

The HTML from the site is:

<div class="text">Ask more leading questions</div>

This is nested within 2 ids and one other class.

The script I'm working on is based off of a few examples I've attempted to follow:

// ==UserScript==
// @name       Change annoying fonts
// @namespace  http://use.i.E.your.homepage/
// @version    0.1
// @description  change annoying FaracoHandRegular font to a more readable one
// @match      https://apps.bloomboard.com/*
// @copyright  2012+, You
// ==/UserScript==

function addCss(cssString) { 
var head = document.getElementsByClassName('text')[0]; 
var newCss = document.createElement('style');
newCss.type = "text/css"; 
newCss.innerHTML = cssString; 
head.appendChild(newCss); 
} 

addCss ( 
'* { font-family: Helvetica, sans-serif ! important; }' 
);


But it doesn't work.

I have never made my own scripts for either Greasemonkey or Tampermonkey before. How do I change this font?

Answers:

Answer

Several things:

  1. First and foremost, for simple CSS changes use Stylus. It's faster and simpler.

    In this case, the equivalent Stylus script would be:

    @namespace url(http://www.w3.org/1999/xhtml);
    
    @-moz-document domain("apps.bloomboard.com") {
        .text {
            font-family: Helvetica, sans-serif !important;
        }
    }
    

    or possibly:

    @namespace url(http://www.w3.org/1999/xhtml);
    
    @-moz-document domain("apps.bloomboard.com") {
        * {
            font-family: Helvetica, sans-serif !important;
        }
    }
    

    although setting a universal style with * should be done sparingly.


  2. Don't reinvent the wheel. Most userscript engines support GM_addStyle(). Use that. Your script would become:

    // ==UserScript==
    // @name       Change annoying fonts
    // @namespace  http://use.i.E.your.homepage/
    // @version    0.1
    // @description  change annoying FaracoHandRegular font to a more readable one
    // @match      https://apps.bloomboard.com/*
    // @copyright  2012+, You
    // @grant      GM_addStyle
    // ==/UserScript==
    
    GM_addStyle ( `
        .text {
            font-family:    Helvetica, sans-serif !important;
        }
    ` );
    


  3. See and read also:

    1. About CSS
    2. Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade
    3. About CSS selectors
Answer

I do not disagree that Stylish may be the better option for the OP's specific use case. That said, there may be other situations where using a userscript is useful.

The issue with your userscript is that you are mixing up two different ways of changing the CSS of an element. The first is to add an additional stylesheet to the <head> tag. The other is to use a DOM method to grab the element and actually alter the style of it directly.

The former has the advantage that you can make the change before the element has actually loaded (by using @run-at document-start, for example). This means the element will already be changed when it is first shown. The latter has the advantage that you can just alter a single element, and not change all elements with class="text".

For the first method, you'll need to modify the css selector that you pass to addCss.:

function addCss(cssString) {
    //...
}  
 addCss (
     '.text { font-family: Helvetica, sans-serif !important; }' );

Or an alternative:

var text = document.getElementsByClassName('text')[0];
text.style.fontFamily = "Helvetica, sans-serif";

Finally, here is a shorter version of the first option that I tend to use in my userscripts*:

var style = document.createElement('style'); style.innerHTML = `
  .text { font-family: Helvetica, sans-serif !important; }
`; document.head.appendChild(style);

*While GM_addStyle is also available, using any GM_* functions loads everything into a sandbox, requiring the use of unsafeWindow to modify the page's JavaScript. This is unnecessary for such a simple feature. Furthermore, as it is something that can easily be done without using the privileged GM_* code, the designer of GreaseMonkey recommends against using this function, and has been considering removing the feature for a long time.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.