@font-face of exported skin

[claudiobosticco]

Hello, I've just noticed that in the skinEditor, using Shiva as base, if I change some fonts to RobotoLight, then in the exported skin, the skin_styles.css file there will be only the the @font-face declaration for RobotoLight - not for Roboto-Light-Vivid - even if in the css both are used.

Also note that not everything inherits from the primary font.

Then, If I've changed everything to RobotoLight, and in the exported css there's its @font-face declaration and it's the only font used in the css, so it's fine.

Then I've changed some fonts to Roboto-Regular: this time in the exported css I see both @font-face declaration, so it's fine, and better then in the first case.

Actually I've got a skin where the @font-face declaration is completely missing, but I can't say how I got there.

Also, I want to ask if it could be possible to use, for instance, fonts loaded from an external source, say:

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i&display=swap" rel="stylesheet">

by adding them in the registeredFonts.json file ?

In this way the @font-face would not only be unnecessary, but must I remove it from the skin_styles.css file?

[claudiobosticco]

Actually I've got a skin where the @font-face declaration is completely missing, but I can't say how I got there.

I see that the config.json file in the template/sass folder ends like this:

 },
    "fontList":[
    ],
    "fontCss":"\n"
}

as now I've got this configuration in my Oracle db, is it feasible to "repair" this skin by adding the list of fonts?

[claudiobosticco]

Actually I've got a skin where the @font-face declaration is completely missing, but I can't say how I got there.

Actually I tried to add the Roboto in the registeredFonts file, set it pervasively in my custom skin, added the googleapis.com Roboto <link>, and my custom skin in my app is happily using it!

[Isomorphic]

hi Claudio - a quick update that we're looking at these reports - we've made a few changes already and will update here with details, once everything is addressed.

[Isomorphic]

hi Claudio,

For the various issues about the fontList and/or fontCSS in the config being wrong or empty - it's not super-clear how you got an empty fontList, but we were able to reproduce the first issue you mentioned (where a custom Shiva skin would get RobotoLight but not Roboto-Light-Vivid) - by creating a new skin, saving it with font-changes and then exporting it right away - that is, in the same session where the new skin was created. We've applied a fix that should address that issue, and we don't see issues in other circumstances.

We also corrected the font-cascade so that in Shiva all the font's cascade from the primary_font, since they're all the same.

For the question about using the Roboto webfont directly - yes, you can do that - the Skin Editor could do with a form to edit the registeredFonts DS, and we'll add Roboto with a new type "webfont", arranging for such font-types to optionally not inject a @font-face, if the URL is a css file that already defines the @font-faces. We may instead offer to load the css file via a call to FileLoader.loadCssFiles() injected into load_skin, so the skin doesn't rely on a <link> elsewhere in code. We won't get to this immediately, but we'll update here when we have more information.

[Isomorphic]

A quick follow-up - the issue you saw where an export had an empty fontList may have come about by creating a new skin and immediately exporting it. Now that the issue is believed fixed, you should be able to repair the fontList for a skin in your Oracle DB by just loading it into the Skin Editor and saving it again. You can use Ctrl-Alt-S to enable the Save button, if you don't have genuine changes.

We'll get back to you when we have more on Roboto etc.