Chrome OS (incognito) and Linux Chrome webfont display issues

Question

I came upon an odd problem while testing web fonts across various platforms. I was working around Windows Chrome font rendering issues using Javascript navigator.appVersion check coupled to a webkit media query (since Chrome & Safari are Webkit, and if on Windows Safari can be ruled out), and created a new problem in the process.

I test in incognito as a quick way to look at a page without saved images etc. but this was a new one to me.

I've added console debugging both before and after the action within the else clause that follows if(navigator.appVersion.indexOf("Win")>-1, so I can see the loop isn't broken by any bad syntax in between, and no errors are thrown.

I thought this might be a bug in Chrome OS, but on Linux Mint the fonts don't load in either type of Chrome window. Clearing caches, cookies and imaged files has no effect on either OS.

Screenshots of:

• Chrome OS regular window (= Windows 8 Chrome),
• CrOS incognito window (= Linux Mint Chrome) - the console logs "loaded" in both cases, and the <style> element is inserted into the DOM as expected.

I'm at a bit of a loss as to how I can reconcile the inconsistencies here and since my Javascript runs in some cases I'm confused as to what is amiss. I'm hesistant to contact any specialist forum about this but let me know if I'd be better off doing so for some sort of Chrome dev group.

If anyone wants to test it themselves here's the page in the screenshots.

I also tried logging into GitHub and my Google account in incognito in case I was seeing an issue related to permissions, but it didn't change anything and regardless that still wouldn't explain the inconsistency with Windows (working in both incognito/regular). The files are being stored in a public GitHub repo and I can definitely access them in the browser even in the situations without font rendering on my site.

<script>
if (navigator.appVersion.indexOf("Win")>-1) {
    console.log("Win test")
    chromeQuery = document.createElement('style');
    chromeQuery.setAttribute('type','text/css');
    chromeQuery.innerHTML = "@media screen and (-webkit-min-device-pixel-ratio:0) { /* Chrome-specific SVG font */ @font-face{ font-family: \"SEGOEUIL\"; src: local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.svg') format(\"svg\"), local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.woff') format('woff'), local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.ttf') format('truetype'); font-weight: normal; } @font-face{ font-family: \"SEGOEUIL\"; src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.svg') format(\"svg\"), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.woff') format('woff'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face{ font-family: \"SEGOEUIL\"; src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.svg') format(\"svg\"), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.woff') format('woff'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.ttf') format('truetype'); font-style: italic; } }";
    document.querySelector('head').appendChild(chromeQuery);
}
else {
    fontload = document.createElement('style');
    fontload.setAttribute('type','text/css');
    fontload.setAttribute('id','fontload')
    fontload.innerHTML = "@font-face{ font-family: \"SEGOEUIL\", \"Helvetica Neue\", Arial, sans-serif; src: local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.eot'); src: local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.eot?#iefix') format('embedded-opentype'), local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.woff') format('woff'), local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.ttf') format('truetype'), local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.svg') format('svg'); font-weight: normal; } @font-face{ font-family: \"SEGOEUIL\", \"Helvetica Neue\", Arial, sans-serif; src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.eot'); src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.eot?#iefix') format('embedded-opentype'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.woff') format('woff'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.ttf') format('truetype'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.svg') format('svg'); font-weight: bold; font-style: normal; } @font-face{ font-family: \"SEGOEUIL\", \"Helvetica Neue\", Arial, sans-serif; src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.eot'); src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.eot?#iefix') format('embedded-opentype'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.woff') format('woff'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.ttf') format('truetype'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.svg') format('svg'); font-style: italic; }";
    document.querySelector('head').appendChild(fontload);
    console.log('loaded')
}
</script>
<noscript><style id="fontload" type="text/css">

@font-face{ 
        font-family: "SEGOEUIL", "Helvetica Neue", Arial, sans-serif;
        src: local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.eot');
        src: local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.eot?#iefix') format('embedded-opentype'),
             local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.woff') format('woff'),
             local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.ttf') format('truetype'),
             local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.svg') format('svg');
        font-weight: normal;
    }

    @font-face{ 
        font-family: "SEGOEUIL", "Helvetica Neue", Arial, sans-serif;
        src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.eot');
        src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.eot?#iefix') format('embedded-opentype'),
             url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.woff') format('woff'),
             url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.ttf') format('truetype'),
             url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.svg') format('svg');
        font-weight: bold;
        font-style: normal;
    }

    @font-face{ 
        font-family: "SEGOEUIL", "Helvetica Neue", Arial, sans-serif;
        src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.eot');
        src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.eot?#iefix') format('embedded-opentype'),
             url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.woff') format('woff'),
             url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.ttf') format('truetype'),
             url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.svg') format('svg');
        font-style: italic;
    }

</style></noscript>

Edit I can't see any font coming in within the resources panel so I can't see what a success looks like — I can see what seems to be the opentype font showing some sort of (latency?) error though, which may be relevant?

(Source Code Pro is not in use, and the icons font isn't for text)

Answer 1

A couple of things look wrong:

1. Your injected styles are surrounded by <noscript> tags, so your fonts will only be loaded when JavaScript is disabled
2. Your @font-face rule should map your custom font to just one family. So font-family: "SEGOEUIL"; instead of font-family: "SEGOEUIL", "Helvetica Neue", Arial, sans-serif;
3. The first rule tries to use a locally installed version of SEGOEUIL, the other always load from githubusercontent.com. So the appearance of the font might change if the user has installed a different version.
4. To avoid unexpected results, set font-weight and font-style for all three declarations.

Changing this fixes the page in Chrome.