42
Views
12
Comments
Reactive Theme with fonts
Question

Hi,

Please note that everything I do below is already working in an application when NOT using a dedicated theme. Since we want to reuse this is new applications we decided to create a theme.

---

I have created a Theme module of type "Blank" and created a theme in that module. In that module I also added some fonts (under resources) and set the deploy action to "Deploy to Target Directory". I then added the CSS to enable these fonts with a similar CSS as below. 

@font-face {
  font-family: "<fontname>";
  src: url("/<company>_Theme/<fontname>.eot");
  src: url("/<company>_Theme/<fontname>.woff2") format("woff2"),
    url("/<company>_Theme/<fontname>.woff") format("woff"),
    url("/<company>_Theme/<fontname>.ttf") format("truetype");
}

I then added a reference to this theme from one of my applications, set it as base theme, noticed that all changes where picked-up by Service Studio and deploy it. After deploy I opened the application and noticed that everything except the font is applied. So the theme works, partially. 

I checked the Developer Tools and noticed that the fonts are not retrieved from the Theme application (as above /<company>_Theme/) but from the local application. So I added set the fonts to public and added references in my application to these public fonts. I noticed that the deploy directory is now "/<appname>/<fontname>.eot" etc. The Deploy Action is still set to "Deploy to Target Directory. So this all looks good to me. I deploy again.

After the deployment I still get the exact same 404 message telling me that the fonts where not available. 

So I have the following questions;

  1. The most important one; Does anyone have a solution to this problem?
  2. How come that even though I set a fixed path to the fonts in the producing Themes CSS the application changes that path to the consuming application?
  3. Why are the fonts not deployed to the consuming application even thought the configuration states it should.

Note that we are using the PaaS environment of OutSystems so my troubleshooting capabilities are severely limited.

Edit: I forgot to mention that I get a "Resource Not Versioned" warning for each font added during the deployment. This happens only in the consuming application, not in the producing Theme application.

Greetings,

Vincent

HI Vicent,

Something weird is going on there.

I just test the same scenario and it did work.

My resource font somehow made to the application, so it was deployed to the path "/<appname>/<fontname>". Despite the resource not being set to public.

Can you double check all the paths to see if they match exactly what is in the resource properties?

Other think that may cause issues is if it doesn't start with /

This is what my example looked like:


Best Regards,

Cláudio Rodrigues

Champion
Rank: #85

Hi Cláudio,

Just to be sure. You have made a separate Theme application and the application you tested with is a different one then the Theme application? Because from the looks of it I don't really have any actual differences then with your example. Even the path starts with a /. 

Thanks for trying it out though!!

Greetings,

Vincent

Hi Vicent,

Yes, I did reference this theme on a different application.

Also tried this theme being the base for that application and as base of the application theme.

Both did work.

But I think you can try something that may work.

In the css, include this "/.." before every path. So for example you will have:

@font-face {
  font-family: "<fontname>";
  src: url("/../<company>_Theme/<fontname>.eot");
  src: url("/../<company>_Theme/<fontname>.woff2") format("woff2"),
    url("/../<company>_Theme/<fontname>.woff") format("woff"),
    url("/../<company>_Theme/<fontname>.ttf") format("truetype");
}

This will "force" the final path of the fonts to be your theme module instead of the application.


Best Regards,

Cláudio

Champion
Rank: #85

Cláudio Rodrigues wrote:



 Hi Claudio,

In your above example I don't see that your "Application" is using your "applicationtheme" as a theme. Both are using "MyTheme" as a base. This is not how I implemented it (and that could be wrong). I created a theme that uses OutSystems UI as a base. Then I created an application that uses the just create theme as base. 

 

Cláudio Rodrigues wrote:

In the css, include this "/.." before every path. So for example you will have:

@font-face {
  font-family: "<fontname>";
  src: url("/../<company>_Theme/<fontname>.eot");
  src: url("/../<company>_Theme/<fontname>.woff2") format("woff2"),
    url("/../<company>_Theme/<fontname>.woff") format("woff"),
    url("/../<company>_Theme/<fontname>.ttf") format("truetype");
}

This will "force" the final path of the fonts to be your theme module instead of the application.


I have also tested this but although one (of 4) font files is being picked-up it's not being used. With this change I also got a lot of versioning errors regarding the font files in the Theme application. I'm not sure if this is the way to go, it just doesn't feel right (in addition with all the errors and such). 

Greetings,

Vincent

 

Champion
Rank: #102

Hi Vincent!


Vincent Koning wrote:

So I have the following questions;

1. The most important one; Does anyone have a solution to this problem?

Before anything, if you put the URL on the browser, can you access one of the font files?


Vincent Koning wrote:

2. How come that even though I set a fixed path to the fonts in the producing Themes CSS the application changes that path to the consuming application?

I think this comes from the 10 Mobile version, where you needed to reference the path to everything because of being deployed with the application bundle to have resources when the device was Offline.


Vincent Koning wrote:

3. Why are the fonts not deployed to the consuming application even thought the configuration states it should.

What do you mean with were not deployed ? It's related to the path to the font file, or some other thing?


Alexandre

Champion
Rank: #85

Hi Alexandre,

  1. I can access/download the file that is deployed in the Theme application. This however is not the file that is referenced by the consuming application and when I use the path the browser tries to access (as found in the developer tools) I also can't download any of the referenced the files. Note that the Deploy Action is set to "Deploy to Target Directory" and the folder name starts with the Espace name of the consuming application instead of the Theme application.
  2. -
  3. As discussed in topic #1. The files are not deployed/written to the disk. The configuration they should be, but in reality, they are not.

Greetings,

Vincent

Champion
Rank: #102

Vincent Koning wrote:

Hi Alexandre,

  1. I can access/download the file that is deployed in the Theme application. This however is not the file that is referenced by the consuming application and when I use the path the browser tries to access (as found in the developer tools) I also can't download any of the referenced the files. Note that the Deploy Action is set to "Deploy to Target Directory" and the folder name starts with the Espace name of the consuming application instead of the Theme application.
  2. -
  3. As discussed in topic #1. The files are not deployed/written to the disk. The configuration they should be, but in reality, they are not.

Greetings,

Vincent

 Hi Vincent!

I just wanted to make sure. From what you are saying I believe you've found a bug in Service Studio. That also happened some time ago, when Mobile was first released with OS10.


I would suggest two things just to try and check if this can solve your problem.

1. Just delete the fonts from the Theme module and the reference to them in the stylesheet. Publish. And then import again the files with a slightly different name. (eg: "MyFont.ttf" to "My_Font.ttf"), and reference in the stylesheet and publish again.

-> If this solves your issue, I would say it was a bug with the deploy of the font files.


2. If the first option doesn't solve your issue, I would suggest just cloning your Theme module and in the application change the reference to the new CloneOfTheme module and check if it works now.

-> If this solves the issue, then is some kind of bug with the module.


Let me know if any if these things works or not.


Cheers!

Alexandre

Champion
Rank: #85

Ah, good to know. Any change you could share both applications with via a reply on this thread? Perhaps I can find some differences that way.

Greetings,

Vincent

Champion
Rank: #102

Hi Vincent.

I'm not sure if you were talking to me or to Claudio. But I don't have any example made, although I do it every time when starting new themes and never had any problems with fonts.

Did you check my answer, that is now in a thread? Did any of the suggestions work?

Cheers!


Champion
Rank: #85

Hi Alexandre,

For some reason my quotes are gone so I understand that you are confused, I would be :).

But I tried your suggestions (as seen in 3 posts higher) but it didn't resolve the problem. I have now made a support ticket about it and they confirmed that my issues is reproducible with the attached demo applications (can't share them here though due to font license/legal blablabla). So I hope they can solve it soon :) Thanks for the effort though!

Greetings,

Vincent

Champion
Rank: #102

Hi Vincent. Ok, thanks for the update!

You really found some kind of strange bug... eheh

Cheers!