Getting Failed to decode downloaded font : & OTS parsing error: overlapping tables Error on dev console

Question

I am very new to FontFaceObserver library, I am just trying to load Serpentine Bold font into my web page. while loading it self I am getting warning message that " Failed to decode downloaded font: OTS parsing error: overlapping tables"

I followed this link : Failed to decode downloaded font and no use of this;

I tried like the following :

var fontCSS = document.createElement('style');
        var fontFile = this.fontPath + fontList[fontName];
        fontCSS.appendChild(document.createTextNode(
            "@font-face {"
            + "font-family: '" + fontName + "';"
            + "src: url(" + fontFile + ");"
            + "}"
        ));
        document.head.appendChild(fontCSS);

        var sampleText = document.createElement('span');
        sampleText.style.fontFamily = fontName;
        sampleText.style.visibility = 'hidden';
        document.body.appendChild(sampleText);

        font = new FontFaceObserver(fontName);
        font.load(null, 2000).then(function (e) {

            }
        }.bind(this)).catch(function (obj) {
            console.error(obj.family, 'not loading');
            }

Is there anything wrong I did. any Code snippet much appreciate.

Thanks :)