I have issues getting my custom font to load on mobile.
Using inspector > sources i can see that it loads as expected on desktops.
But doing the same thing with the mobile (android / developer options / inspecting via usb cables) shows it is not loaded.
The font is set up in the global options like so:
Any ideas what the issue could be?
Hey @TristanP,
On my end, even in desktop, your isn’t used though it’s loaded (see screenshot in the secure note).
I uploaded your woff font to my test site and it works both in desktop and in mobile (real phone).
This means that there is something wrong with your setup though it looks correct. Would you mind trying clearing all caches and deactivating all 3rd party plugins.
Then, remove the custom font and then set it up again this time name it with 1 word only then don’t use TTF. In fact, it’s best to use WOFF2. You can convert your font using online font converters. Please also use 1 font weight only.
Let us know how that goes.
Thanks.
Hi Christian,
Thanks. I changed it to WOFF2 and one weight only. Also turned off all caching.
Didn’t work. Meanwhile, here is some other info that may help:
When the font has been assigned in the builder, it works fine on both desktop and mobile.
However, in the instances where i have applied it with inline styling, is where it goes wrong on mobile. So the following works on desktop, but not on <span class="brandname">this is custom font</span>
This is kind of cumbersome, since i only want the brandname to have this custom font.
So let’s say i have a text that reads “this is an example text that has the brand name somewhere in the sentence” where my entire sentence should be body copy font, and only the brand name should be the custom font, i would ideally just apply the custom font only with the <span style='font-family:customfont'>brandname</span> or <span class='brandname'>brandname</span>. where obviously the css needs to be there.
It works if i do it like this: I take a text element in cornerstone, set the font for the entire text block to the custom font and then style the text inline as follows:
<span style='IBM Plex Sans'> This is an example sentence with the</span>brandname<span style='IBM Plex Sans'> somewhere in the sentence</span>
So i have a workaround now, but I think it is kind of strange that it doesn’t work the other way around, by just applying inline styling to the brandname only?
Hi Tristan,
Glad that you are able to find a workaround here.
NOTE: You can also use a CSS class with font-family and other style attributes and add that to the class attributes of the span instead of style.
Thanks
Hey Tristan,
In addition to what my colleague, Tristup said, it really is needed to “load” the font by selecting it in one of the elements. Cornerstone does not load all the custom fonts unless it’s used. That is for performance reasons. So, you can use a text element and hide it so that you can load the font in the page you need the font to be loaded.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
