Using a custom font on a button

Question

I am currently working on a userscript that adds features via buttons for Cookie Clicker. I nearly have it finished but i would like the game font to be used as the button font but I have no idea how to do this, I know it is possible as I saw it about two years ago but I can't remember where. The font that i want used is "font-family:\"Kavoon\""

The part of the script that is relevant is as follows:

function addStyleSheet() {
    var stylesClassName = options.panelId + '-styles';
    var styles = document.getElementsByClassName(stylesClassName);
    if (styles.length <= 0) {
        styles = document.createElement('style');
        styles.type = 'text/css';
        styles.className += ' ' + stylesClassName;
        styles.font = superFont
        document.body.appendChild(styles);
    }
    var css = '#' + options.panelId + '{position:fixed;top:0;right:0;background:#000;color:#fff;padding:5px;z-index:9999;}#' + options.panelId + ' button{margin-left: 5px;}#' + options.panelId + ' button.active:after{content:"*";color:red;}';
    styles[(typeof document.body.style.WebkitAppearance == "string") ? "innerText" : "innerHTML"] = css;
}

and here is an example of how one of the buttons are set out like:

var options = {
    panelId: 'cookie-cheater',
    intervalDelay: 1,
    buttons: {
        'bigCookie': {
            label: 'Autoclick Big Cookie',
            action: function () {
                toggleAutoAction('bigCookie', function () {
                    Game.ClickCookie();
                })
            }
        }

I would be very appreciative if someone could come up with some ideas or a solution!

Thanks, Daniel

.....................................................................................................................................................................

EDIT: DONE! pulled an allnighter to get this done and I'm finished, I learnt a lot and ended up with my own solution, please, if you are in the same situation as I was, use the updated method that Brock Adams posted on Ravi Hamsa's post.

Thanks to all of you for your help! Daniel

Answer 1

Add this line into your head tag.

<link href='http://fonts.googleapis.com/css?family=Kavoon' rel='stylesheet' type='text/css'>

this will make "Kavoon" ready to use in your page, then you can use font-family:Kavoon in your style.

---

Update: To add the <link> in a userscript environment, use this code:

var D           = document;
var linkNode    = D.createElement ('link');
linkNode.type   = "text/css";
linkNode.rel    = "stylesheet";
linkNode.href   = "http://fonts.googleapis.com/css?family=Kavoon";

var targ = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
targ.appendChild (linkNode);

Then Activate the style with code like this:

GM_addStyle ("button {margin-left: 5px; font-family: 'Kavoon', cursive;}");

In fact, you should be using GM_addStyle(), which is supported by all major userscript engines, not that addStyleSheet() function.