CSS Font family not working in Firefox

Question

Hey I have the following code in a scss file:

@font-face {
    font-family: 'tr-icon';
    src:url('../fonts/tr-icon.eot?88d087');
    src:url('../fonts/tr-icon.eot?#iefix88d087') format('embedded-opentype') ,
        url('../fonts/tr-icon.ttf?88d087') format('truetype') ,
        url('../fonts/tr-icon.woff?88d087') format('woff') ,
        url('../fonts/tr-icon.svg?88d087#trends') format('svg') ;
    font-weight: normal;
    font-style: normal;
}
[class^="tr-icon-"], [class*=" tr-icon-"] {
    font-family: 'tr-icon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}

It is rejected by Firefox with the following error :

downloadable font: rejected by sanitizer (font-family: "tr-icon" style:normal weight:normal stretch:normal src index:0)

I just can't get it working. I tried different work-around as https://jamie.curle.io/posts/firefox-font-rejected-by-sanitzer/ or https://github.com/Semantic-Org/Semantic-UI/issues/2121 but nothing seems to work... Any other idea ?

Answer 1

you have tried this?

removed the query string at the end of each line?

@font-face {
    font-family: 'tr-icon';
    src:url('../fonts/tr-icon.eot');
    src:url('../fonts/tr-icon.eot?#iefix') format('embedded-opentype') ,
        url('../fonts/tr-icon.ttf') format('truetype') ,
        url('../fonts/tr-icon.woff') format('woff') ,
        url('../fonts/tr-icon.svg#trends') format('svg') ;
    font-weight: normal;
    font-style: normal;
}

Because of the query string at the end of each url/path is te reason why your font is rejected by sanitizer.