Font loads very slowly, then cuts off text

Need help
1

Hi,
recently, I experienced that the font type loads very slowly (first sans serif, then after 5-10 seconds changes to correct font). Then in dynamic text fields it cuts off parts of the text. I have attached two images showing the font during loading period and then with the correct font, but cut off text. I suppose because it sets the height based on the sans serif-font. Any ideas how I can change this behavior?

Font during loading period:

Bildschirmfoto 2016-12-02 um 14.26.23.png713Ă—132 10 KB

Correct font, with cut off last line:
Bildschirmfoto 2016-12-02 um 14.26.36.png710Ă—115 8.95 KB

2

You could try containing the font element into a fixed-width group, then expand both to leave a comfortable amount of space at the bottom of the text field?

3

Thanks! I will try. However, as the size of the text element varies quite significantly, i was trying to avoid using fixed-width elements…

4

Are you using a custom font?

5

Yes, I am using LatoRegular

6

Just checked the page with chrome (+firefox) and the console shows me: “fontinactive being called, Google says the fonts didnt render” if that helps…

7

Yea, I’m curious as to why this is happening.

What I meant to say was are you using the custom font option within bubble, where we’re able to upload our own fonts.

Lato of course is served by Google and shouldn’t be giving you any loading speed problems.

How many different font faces, weights etc are you using? Just Lato regular?

I would like to look inside your app to see how you’ve constructed the layout.

8

I found the error. Thanks a lot for your support! The problem was that I had installed Lato Regular as a custom font for some reason (from https://fontlibrary.org/en/font/lato). I guess, installed as a custom font lato caused the long loading time.

9

Cool! I’m glad the issue is fixed.

Custom fonts can be tricky. I think what’s happening here is that the entire font family is being loaded along with the entire subset of characters for each font, which is could be upwards of a few megabytes (especially with such a comprehensive font as lato).

Alternatively, it could be the weights and subsets were correctly optimized but the fontlibrary stream is just slow.

Anyways, it’s good to hear the issue was resolved. Can’t wait to see what you’re building!

10

That makes sense, that this would slow down the loading time! We are a startup still in stealth mode, so unfortunately I can’t tell yet, however shouldn’t be for too long anymore :slight_smile:

1 Like