Google Fonts Don't always Render

[Bambicruz]

I'm using Google web fonts and sometimes they don't render in the chart (Sometimes the text is in Open Sans, sometimes it just goes to Arial)

Any advice?

Thank you!

[lokapal]

The problem doesn't concern Google fonts. The problem is with ANY external CSS-described font used as Scales font (I tried UbuntuMono instead of DroidSansMono - the same problem - empty axes). It took for me approximately 4 full days to find the root of the problem in my dynamic code. I don't know how to mend it in the js code, but workaround can be made by mapping to local system fonts:

<script>
    var isMac = navigator.platform.toUpperCase().indexOf('MAC')!==-1;
    var isWindows = navigator.platform.toUpperCase().indexOf('WIN')!==-1;
    var isLinux = navigator.platform.toUpperCase().indexOf('LINUX')!==-1;
    var uagent = navigator.userAgent.toLowerCase();
    var isAndroid = uagent.indexOf("android") > -1;

    if (isWindows) ligopt.scaleFontFamily=["'Lucida Console'","'Consolas'","'Courier'"];
    if (isMac)         ligopt.scaleFontFamily=["'Menlo'","'Courier'"];
    if (isAndroid)   ligopt.scaleFontFamily=["'DroidSansMono'","'Courier'"];
    if (isLinux)       ligopt.scaleFontFamily=["'DroidSansMono'","'UbuntuMono'","'Courier'"];

window.onload = function() {
       var Bar_ligmodels = new Chart(document.getElementById("canvas_ligmodels").getContext("2d")).Bar(ligmodelsdata,ligopt);
                                           }; 
</script>

Or by using plugin Font Face Observer::

       var fontMono = new FontFaceObserver('DroidSansMono', { weight: 400 });
       fontMono.load(null, 7000).then(function () { 
        var Bar_ligmodels = new Chart(document.getElementById("canvas_ligmodels").getContext("2d")).Bar(ligmodelsdata,ligopt);
                                                   }, 
        function () { 
            var flist;
        if (isWindows) flist=["'Lucida Console'","'Consolas'","'Courier'"];
        if (isMac) flist=["'Menlo'","'Courier'"];
        if (isLinux) flist=["'DroidSansMono'","'UbuntuMono'","'Courier'"];
        if (isAndroid) flist=["'DroidSansMono'","'Courier'"];
        chartfonts(flist);
        var Bar_ligmodels = new Chart(document.getElementById("canvas_ligmodels").getContext("2d")).Bar(ligmodelsdata,ligopt);
            });

    function chartfonts(fl) {
        ligopt.scaleFontFamily=fl;
        ligopt.inGraphDataFontFamily=fl;
                            };

All is working right now in Windows XP, Windows 7, Windows 8.1, Windows 10, Ubuntu 14.04 LTS, MacOS X El Capitan in MSIE 8, 11, Firefox, Palemoon, Chrome, Safari

[markosko]

This problem isn't only with font but images too everthing need to be loaded before charts will start drawing