In my HTML document, I have a div tag located within the body like so:
<div id="content_text"></div>
Using javascript, I later set the contents of the div like this:
var content_text = document.getElementById("content_text")
content_text.innerText = content
The 'content' variable is a string.
Additionally, the div has the following styling:
#content_text
{
font-size: 30px;
font-family: alexandria_n;
position: absolute;
top: 280px;
left: 100px;
z-index: 1;
overflow-y: scroll;
}
The font 'alexandria_n' is loaded from a local folder using @font-face in the style sheet:
@font-face
{
font-family: alexandria_n;
src: url("resources/alexandria_n.ttf");
}
The issue arises when viewing the page in Firefox. The text displays correctly in Safari and Chrome with the specified styling, but does not show up at all in Firefox. There is no trace of the div when viewed in Firefox.
Upon inspecting the browser console in Firefox, I found the following error message:
downloadable font: kern: Kerning pairs are not sorted., table discarded (font-family: "alexandria_n" style:normal weight:normal stretch:normal src index:0) source: file:///.../resources/alexandria_n.ttf
Even after changing the font-family to Arial in the div styling, the text still fails to display in Firefox:
#content_text
{
font-size: 30px;
font-family: Arial;
position: absolute;
top: 280px;
left: 100px;
z-index: 1;
overflow-y: scroll;
}
I am unsure about the CSS/HTML intricacies required to troubleshoot this issue. Any assistance or guidance would be greatly appreciated! :)