Poppins webfont is breaking out of its container

Axure RP 9
1

We’ve been using Poppins for a few years now and have recently noticed is not rendering properly on published link - even though it looks find in the application and also in preview.

This means if I create a button with equal padding on each side, it has more padding on the left than on the right when it’s published (see example)

Poppins%20issue

When I inspect the published link, the width of the box is definitely smaller than the text inside it, which makes me think this may be a font issue. I’ve tried reinstalling the font and also checked the CSS webfont code from Google.

Any ideas??? (thanks in advance)

Poppins font test.rp (55.0 KB)

2

Following, we use poppins as well and notice this same problem. The left side is correctly padded, but the right loses it’s padding causing the button to not be centered correctly in the button.

image

3

The only work around I have @paulUK is to set the button to fixed width, that solves it. But hoping for a more scalable solution.

4

Thanks - good to know it’s not just me.

Good idea but we want to try and avoid using fixed width as this won’t give developers the correct sizes in ‘Inspect’

5

Interesting, good to know about the misleading width sizes for developers when using fixed.