detect if font download in IE is enabled

Question

Is there a way to detect whether the font download property in internet explorer is disabled or enabled?

Currently if I were to implement an @font-face solution (font-squirrel or typekit or other) for font-rendering, all browsers will play nice except if internet explorer has its "Font Download" option disabled.

This setting can be found in IE > Internet Options > Security > Custom Level > Downloads > Font download > Enable/Disable.

If I can detect this option, I could fall back to javascript methods.

These solutions do not work as this option does not actually disable the feature, it prevents a download from occurring:

http://paulirish.com/2009/font-face-feature-detection/
http://www.lalit.org/lab/javascript-css-font-detect/

EDIT: I should mention that we cannot not use a server-side solution, it must be purely client-side scripting.

score 7 · Accepted Answer · answered Nov 01 '11 at 23:29

7

As this feature prevents a download from occurring, a (rather dirty) solution would be to ask IE to download a so-called font that is actually a simple script on your server that puts eg. a cookie saying “ok he gots the font” and returns a blank page. When the user loads the next page, you will deploy the Javascript machinery if the cookie isn't there.

enter image description here

answered Nov 01 '11 at 23:29

zopieux

2,854
2
25
32

This was my first idea, but we cannot use any server side scripting for this particular project. In any case, how would one simulate a font download as with @font-face? As of right now, I've been attempting to do an ajax get of the font itself, and it gets and downloads fine even when font-downloading is disabled. – Scorpius Nov 02 '11 at 14:43
1

Downloading using JS will obviously work whatever is the option. You *have* to ask IE to download the font by putting a @font-face that leads to the script I explained, so you can see if the browser downloads it or not. If you can't do anything on the server, well, I believe you're screwed. – zopieux Nov 02 '11 at 16:55

score 5 · Answer 2 · answered Sep 28 '15 at 22:25

I realize this question is old, but this problem still exists for some corporate internet users with strict IT security. I looked into the solutions above and others, but they didn't work well for me, so I found another solution that requires no server side code, no javascript, and no css. Its essentially magic, but it has some limitations.

Limitation 1: This will only work for icon-fonts that use high number codepoints to display images. It will not work for typeface fonts for readable text.

Limitation 2: You must find a standard UTF-8 symbol that is a suitable replacement for your custom icon.

For example, if you have a custom font that you use to display a star symbol, a suitable fallback for this would be unicode code point 0x2605 ★. So, in your font generation code, you would need to hard code that codepoint to your css class for your star icon. If you were using "grunt-webfont" you would do something like this in your grunt file:

webfont: {
    icons: {
        options: {
           codepoints: {
              'star': 0x2605
       ...
}}}}

The star is a perfect example; it may be challenging to find a suitable UTF8 replacement for your fancy icons so this may not work for everyone. Considering that this problem affects a very small number of users, we felt that this was a suitable transparent solution that did not impact regular users with extra js/css/cookie cruft.

Scorpius · Answer 3 · 2011-11-04T21:03:22.173

Based on @Zopieux flow chart, I was able to make this script work for IE6-9 when font-downloading is disabled, which in my case was for a client where like other corporate intranets have this setting disabled.

CSS:

@font-face {  
    font-family: 'TestFont';  
    src: url('/includes/font.php?type=eot');  
    src: url('/includes/font.php?type=eot#iefix') format('embedded-opentype'),  
     url('/includes/font.php?type=woff') format('woff'),
     url('/includes/font.php?type=ttf') format('truetype'),
     url('/includes/font.php?type=svg#UniversLTStd49LtUltraCn') format('svg');
    font-weight: normal;  
    font-style: normal;  
}

PHP, when the font-face src url is requested, it pulls this script, which checks the type, sets the cookie, and serves the webfont of choice. If font-downloading is enabled and you do not re-route to the font file, IE will throw up an @font-face error:

<?php
$type = $_REQUEST['type'];
$location = "Location: /includes/fonts/universltstd-lightultracn-webfont.".$type;

// create a cookie
setrawcookie("FontDownloaded", 1, time()+3600*24, '/');
header($location);

?>

JS, then on the client side, do something like this to check for the cookie, and perform the alternative like cufon-yui.js or typeface.js:

$(function() {
    $('body').append('<span id="TestFont"/>');
    $('#TestFont').html('Testing').css({
        fontFamily: 'TestFont',
        opacity: 0
    });

    // find cookie
    bool = Boolean(getCookie('FontDownloaded')); // use your own cookie method

    if (!bool) {
        // implement @font-face fallback        
        Cufon.replace('.items', { fontFamily: 'NewFont' });
    }
    $('#TestFont').remove();
});

detect if font download in IE is enabled

3 Answers3