Using Javascript to detect if font is installed, then serve different css if it's not

Question

I'm new to Javascript (but not HTML or CSS) and am trying to use this script by Lalit Patel to detect whether a font is installed on the user's system, and if not, to serve a modified style sheet. I've been successful in getting the first part to work: I uploaded the fontdetect.js file, called it in my header, then pasted this before the end of my body tag:

<script type="text/javascript">
window.onload = function() {
    var detective = new Detector();
    alert(detective.detect('Courier'));
};
</script>

(With Courier used as an example.) This causes an alert to pop up on page load telling me whether a font is installed, and works beautifully. But I don't know how to get the script to, instead of triggering an alert, grab a different stylesheet. This seems like basic stuff but I just can't find the specifics anywhere, even though I've been plowing through Javascript tutorials. Any guidance would be greatly appreciated!

If any more specifics are needed: If a user doesn't have the custom font installed or has custom fonts turned off entirely, I'd like to, using CSS change the size/spacing properties of the text so that the fallback font is able to fit in the same space.

@Rohrbs: both of those rely on jQuery, yet OP doesn't mention or tag the library... — Brad Christie
– Brad Christie, Commented Apr 3, 2013 at 14:53
@BradChristie It's a comment. They probably should've mentioned it used jQuery, but it's not any less valid as a comment — Ian
– Ian, Commented Apr 3, 2013 at 14:53
@BradChristie True. I did notice the OP didn't mention jQuery, but thought those SO Q's would get them on the right track. Regardless, kudos on the pure JS answer. :) — Rohrbs
– Rohrbs, Commented Apr 3, 2013 at 14:57

Brad Christie · Accepted Answer · 2013-04-03 14:49:35Z

3

var detective = new Detector();
if (!detective.detect('Courier')){
  var s = document.createElement('link');
  s.rel = 'stylesheet';
  s.type = 'text/css';
  s.media = 'all';
  s.href = '/link/to/alternative/stylesheet.css';
  document.getElementsByTagName('head')[0].appendChild(s);
}

Guessing something like that. if .detect() fails, it will dynamically create and insert a stylesheet in to the page. If you encounter problems, you can also use .setAttribute() off of the s element.

answered Apr 3, 2013 at 14:49

Brad Christie

102k16 gold badges160 silver badges200 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ryan McDonough · Accepted Answer · 2013-04-03 14:49:36Z

1

You can use JS to add a stylesheet to the website:

var detective = new Detector();

if (!detective.detect('Courier')){    
     document.createStyleSheet('location/stylesheet.css');
}
else
{
     document.createStyleSheet('location/otherstylesheet.css');
}

So you could do a check to see if the Dectector returns true, if not load one style, if it does then load the other.

answered Apr 3, 2013 at 14:49

Ryan McDonough

10k3 gold badges60 silver badges81 bronze badges

4 Comments

Brad Christie Over a year ago

to my knowledge, createStyleSheet is only valid in IE.

carefulnow1 Over a year ago

@BradChristie doesn't work at all now in IE11: msdn.microsoft.com/library/ms531194

Brad Christie Over a year ago

@carefulnow That's a good thing, they're standardizing; Nothing worse than a unique IE api.

carefulnow1 Over a year ago

@BradChristie really? But everyone loved doing everything ActiveX!

Community · Accepted Answer · 2017-05-23 10:30:45Z

After trying all the methods presented, this is the one that worked for me (from this answer, but it's really a mix of the two answers presented here). It should be noted that this works in IE8, unlike most of the other methods (sadly I do need IE8 compatibility).

<script type="text/javascript">
    window.onload = function() {
        var detective = new Detector();
        if (!detective.detect('Meat')){
            var url = 'link/to/style.css'
            if(document.createStyleSheet) {
                try { document.createStyleSheet(url); } catch (e) { }
            }
            else {
                var css;
                css         = document.createElement('link');
                css.rel     = 'stylesheet';
                css.type    = 'text/css';
                css.media   = "all";
                css.href    = url;
                document.getElementsByTagName("head")[0].appendChild(css);
            }
        }
    };
</script>

This detected that my browser wasn't accepting embedded fonts ("Meat" being one of the fonts I embedded) and served up the alternate CSS (although with a slight delay/flash of unstyled text, maybe because it's at the bottom of the page?) Anyhow, thanks again for all the help!

Collectives™ on Stack Overflow

Using Javascript to detect if font is installed, then serve different css if it's not

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related