Font Face not working in Firefox with dynamic JS

Asked Jun 26 '14 at 17:23

Active Jun 26 '14 at 17:23

Viewed 441 times

I am dynamically using JS adding a font-face which works for all browsers but Firefox.

Any ideas why?

function fontFace (className){
    // var secondClassNameFont = className.charAt(className.length - 1)
    // var secondClassName = className.substring(0, str.length - 1)
    // secondClassName = secondClassName + parseInt(secondClassNameFont) + 1
    // console.log(secondClassName)
    // console.log(className )
    var newStyle = document.createElement('style');
    newStyle.appendChild(document.createTextNode("\
        @font-face {\
            font-family: '" + className + "';\
            src: url('./css/fonts/compressed/eot/" + className + ".eot?#iefix') format(embedded-opentype),\
            url('./css/fonts/woff/" + className + ".woff') format(woff),\
            url('./css/fonts/ttf/" + className + ".ttf') format(truetype),\
            url('./css/fonts/compressed/svg/" + className + ".svg#') format(svg);\
        }\
        ." + className + "{\
            font-family: '" + className + "';\
        }\
    "));

    document.head.appendChild(newStyle);
    // console.log(className)
}

asked Jun 26 '14 at 17:23

Mohamed El Mahallawy

13,024
13
52
84

http://draft.quran.brace.io/#/ayat/1/1/10 is the staging – Mohamed El Mahallawy Jun 26 '14 at 17:41
The fonts are broken in Firefox and not working – Mohamed El Mahallawy Jun 26 '14 at 17:43
I found mention, I found solutions like this: http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie?rq=1 but I am on Nodejs – Mohamed El Mahallawy Jun 26 '14 at 17:45
I meant where is `.p1` class? – Huangism Jun 26 '14 at 17:45
Creating it in the head of the html page – Mohamed El Mahallawy Jun 26 '14 at 17:49
Where is it on the page? – Huangism Jun 26 '14 at 17:50
Each of the font that is not being rendered is a `.p1` which the style @font-face is being created dynamically in the head of the page – Mohamed El Mahallawy Jun 26 '14 at 17:51
You are not getting it, ok, what is the element `.p1` near? I need to inspect it but right now I cannot find it in the html – Huangism Jun 26 '14 at 17:54
Inspect one of the broken fonts, that's it. It's on the `` tag within the `` – Mohamed El Mahallawy Jun 26 '14 at 17:58
I am seeing a `ﭒ` character as text. Is this normal? – Huangism Jun 26 '14 at 18:01
No, if you see on chrome, it will actually render out the text. In Firefox, it doesn't work – Mohamed El Mahallawy Jun 26 '14 at 18:04

Font Face not working in Firefox with dynamic JS

0 Answers0