Menu
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?
657
Several things:
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.
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;
}
` );
See and read also:
149
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.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
