integrating my own font into custom.css

cdietl

Hi Axon Ivy Team and Community,

I would like to integrate my own font (woff) into the CSS.
Can you please tell me how to do this?

I have currently placed the file in the branding folder and reference it as follows in the CSS.

@font-face { font-family: 'bundessansweb'; src: url("BundesSansWeb-Regular.woff") format("woff"); font-weight: normal; font-style: normal; }

But this does not work!

Best regards,
Claudia

Alexander Suter

cdietl As far as I know, it was never the intention to change the font. Therefore, we would first need to carefully assess what exactly would have to be adjusted. The current font harmonizes with the overall portal design as well as with the user dialogs - and it should also be accessible. Changing the font could tear the design apart, as a font defines letter spacing, stroke widths, x-heights, and more. This would also mean that process developers would need to maintain the branding configuration in their designer installations so they can properly develop the user dialogs with the correct fonts.

Why would you like to change the font?

Dominik

Alexander Suter
I was able to change the font on the windows engine via the custom css. However the same css does not work on docker

Lukas Lieb

Do you maybe have multiple apps in your engine which all or at least multiple of them have branding resources?
Because if yes, the first found on the engine will be taken for all branding assets. Even if another has a custom.css with other content.

I suggest that for each security system you have only one app that specifies branding resources, or all of the apps should contain all branding resources.

cdietl

Alexander Suter

Our customer would like to be able to customise the font of their dialogues in order to comply with their corporate design. This is probably essential in the public sector. The portal is not affected by this. It is sufficient if the user dialogues can be customised.

In addition, the customer states that it works fine when deployed without a portal. Only when the portal is integrated the font is no longer supported.
The customer received the following error message after embedding the font.

download failed (font-family: ‘bundessansweb’ style:normal weight:400 stretch:100 src index:0): status=2147746065 source: [http://.../ Test/faces/javax.faces.resource/BundesSansWeb-Regular.woff]http://.../Test/faces/javax.faces.resource/BundesSansWeb-Regular.woff

During my research, I noticed that when using the ttf format in the user dialogue, the heading is displayed with the new font, but a <p:outputLabel>, for example, is not.
In the same example, but using woff, the font was not loaded at all. It seems to me that woff is not as well supported as ttf.

I hope it is possible to customize the user dialogs. The format doesn't matter, they have both available.

Lukas Lieb

Make sure that you not only register your font but also use it, e.g. with

body {
  font-family: bundessansweb;
}

And if you see a component that does not use it, I would recommend that you to check this component with the dev tools of the browser, to see if there are rules that override this global definition.