Changing default font in theme builder, page rendered incorrectly or not at all

[itg-assistant]

Dino Novak asked 2017-12-29 22:03:41 UTC

I an trying to customize the app throught theme.

I created a custom theme that is using Google Roboto font as default font definition.

When opening the page in Firefox font is not applied, when opening the page in Safari on Mac page is blank but in web inspector there is .js error (screenshot attached)

[itg-assistant]

Luca answered 2017-12-29 23:14:07 UTC

Looks like the browser is either unable to load the font from google's fonts or it's timing out. I checked your theme changes and the only problem I could see is that the custom source is repeated for each font causing the browser to reload the same font several times. There is no caching in the browser and in Wisej for the font sources (we should add it to Wisej...)

Loading a font for a browser is very time consuming and prone to failure on timeouts. On a normal wordpress site it shows by updating the elements few seconds later (or never until a refresh). Wisej needs the font loaded to measure the element so it has a font loader system that waits until the font is loaded.

The best way is to either embed the font into the theme or load it from a local file. See attached modified theme. The font is embedded by checking the "Embed as data URI" checkbox. You need the source defined only once in the theme. I tried it with Chrome, FireFox and IE11.