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.

have you checked [here](http://stackoverflow.com/questions/805384/how-to-apply-inline-and-or-external-css-loaded-dynamically-with-jquery) or [here](http://stackoverflow.com/questions/2685614/load-external-css-file-like-scripts-in-jquery-which-is-compatible-in-ie-also)? — Rohrbs, Apr 03 '13 at 14:48
@Rohrbs: both of those rely on jQuery, yet OP doesn't mention or tag the library... — Brad Christie, Apr 03 '13 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, Apr 03 '13 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, Apr 03 '13 at 14:57
Sorry, should have mentioned that I do have jQuery installed, although I am still JS 101 so pure JS is easier to wrap my head around. I do appreciate the links though (and have updated the tags). — Nails, Apr 03 '13 at 15:10

score 3 · Answer 1 · answered Apr 03 '13 at 14:49

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.

score 1 · Answer 2 · answered Apr 03 '13 at 14:49

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 03 '13 at 14:49

Ryan McDonough

9,732
3
55
76

to my knowledge, [`createStyleSheet`](http://msdn.microsoft.com/en-us/library/ie/ms531194%28v=vs.85%29.aspx) is only valid in IE. – Brad Christie Apr 03 '13 at 14:50
@BradChristie doesn't work at all now in IE11: https://msdn.microsoft.com/library/ms531194 – carefulnow1 Apr 18 '17 at 16:12
@carefulnow That's a good thing, they're standardizing; Nothing worse than a unique IE api. – Brad Christie Apr 19 '17 at 17:41
@BradChristie really? But everyone *loved* doing everything ActiveX! – carefulnow1 Apr 19 '17 at 19:08

score 1 · Accepted Answer · edited May 23 '17 at 10:30

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!

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

3 Answers3