#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    2
    Rep Power
    0

    CSS fonting in a button


    Hello,
    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:

    Code:
    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:

    Code:
    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
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    2
    Rep Power
    0

    Fixed!


    EDIT: Fixed it! the solution is as followed if anyone else has the same problem as me:

    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);
    
    GM_addStyle ("button {margin-left: 5px; font-family: 'Kavoon', cursive;}");
    Last edited by Kravvitz; September 24th, 2013 at 01:43 PM. Reason: must we quote the whole post? :p
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Welcome to DevShed Forums, Zackton.

    Congratulations on finding a solution and thanks for posting it.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo