Need some help with scrollHeight of a font.

[DrHeinzDoofenshmirtz]

Hi.

I have a case where I can't get the text fitting to work. textFit is diffinitely the best function for this that I have found.
But I have this case, and I am not exactly sure what the problem is, but I have an idea that it is the font.

So, I basically just a div container (70x70px) with a paragraph

insite of it holding some text.
The p element is set to fit the container and have some padding all the way around (8px), which means the content actual content area is 54x54px.
When I try to debug the binary search fit part of the function, I can see that scrollHeight of the textFitted span does not correspond to the actual height, when I manually set the font-size afterwards and inspect the height.

I am using a font from Google Fonts called Orbitron, and I think it might be the reason. The font is fine, but maybe it has a setting that makes it difficult for scrollHeight to show the correct value?

Note: When I am using the normal sans-serif font everything works perfectly on the pixel.

I hope someone can help me, ask the right questions, and point me in the right dirrection.

Best
Matt

[STRML]

Sounds like that font is not configured correctly, or you might not be waiting for the webfont to load before doing the fitting. Try introducing a delay, or compensate otherwise with reduced or additional padding. Other than that, I don't think there's much this library can do.

[DrHeinzDoofenshmirtz]

Hi, thanks for the reply!
Wouldn't the fact that I can see and use the webfont mean, that it has been loaded?
My setup doesn't allow for any specific values for padding and so on for a specific font. That ruins the point of what I am doing sadly. So it has to be a generic solution that works for all fonts. Or at least all the fonts that I allow.
How can I determine if the font is not setup correctly? I have not been working with font configuration before, so I have almost no knowledge of how it works.

[DrHeinzDoofenshmirtz]

Okay, so I tried with a different font. It works a little bit better for the second cell (the one saying "Hej"), which was larger before. Now it is inside the boundary. But the third cell is still the same. The width seems to be okay, but the height should be smaller, and the font should therefore be smaller as well.