[TIMOB-13164] mobileweb rendered @font-face declaration is not valid

*When using a custom font, rendered CSS code is not valid.*

Steps to reproduce

create a new Titanium project (Single Window Application template)

_alloy new_ it

create assets/fonts directory and put any -- supported non-system -- font in there

change Label element style so it calls the mentioned font

"Label": {
    color: "#000",
    font: {
        fontFamily: "Comic Zine OT"
    }
}

see the font not being applied to the element

Analysis

When opening the built mobileweb/titanium.css, our font declaration at the very end of the file is

@font-face {
  font-family: fonts/comic_zine_ot.otf;
  src: url(fonts/comic_zine_ot.otf);
}

To be usable by browser, it should be

@font-face {
  font-family: "Some Font Name";
  src: url(fonts/comic_zine_ot.otf);
}

To be working, "Some Font Name" should be a valid string and the same as in the defined _tss_ file.

Workaround

I cannot see any workaround since the rendered _font-family_ is expecting a *user defined* font identifier. May be adding a _font-face_ declaration could do the trick.