Bungee Shade triple render on iOS Safari (and others)

[lfinsaas]

Hi folks,

First off, big fan of Bungee! Thanks for all your work on this project.

We're running into an issue where Bungee Shade is rendering the inline strokes three times. We've checked our code, internal and external devs, and it appears that the issue is within the font itself?

Check it out yourself on iOS Safari: https://from-scratch.net/.

There seems to be something with the viewport, too. Untouched, we can see the repeated inline strokes. When you zoom in, the issue resolves. Maybe something to do with retina?

We're all scratching our heads over here. Let us know if there's something we're missing or anything else we can do to get the font to render properly!

Luke Finsaas

[djrrb]

Just a quick message without looking closely: I’m wondering if the font is getting faux-bolded... try removing font-weight: bold from the CSS element, or adding font-synthesis: none and see if that helps?

[djrrb]

And btw...thanks for using Bungee! The site looks great :-D

[lfinsaas]

That makes a lot of sense! We'll implement tomorrow and report back!

[sneakinhysteria]

@djrrb Thanks David, unfortunately the issue remains after removing “bold” and any indication of font weight

[djrrb]

Ah, most user stylesheets will make <h1> bold by default, so even though you do not set font-weight: bold explicitly it is still bolded. (The “your message” in the title is also getting faux-bolded, the effect is just more subtle.)

So the two easiest solutions are:

— to explicitly set your <h1> to font-weight: normal; and/or — to avoid any chance of faux-bolding by using font-synthesis: none;

Here is a codepen and the results I get in Safari on iPad: https://codepen.io/djrrb/pen/OJdPBbE

If for some reason you don’t want to change the styling of the page, you can also fix this by adding font-weight: bold to your @font-face calls, so that Bungee loads as Bold instead of Regular.

Hope that helps!

[sneakinhysteria]

Thanks so much for the quick and comprehensive reply. Forwarded to our devs. On 24 Oct 2023, at 14:25, David Jonathan Ross @.***> wrote:OJdPBbE

[sneakinhysteria]

Fixed, thanks for your help! On 24 Oct 2023, at 14:25, David Jonathan Ross @.***> wrote: Ah, most user stylesheets will make

bold by default, so even though you do not set font-weight: bold explicitly it is still bolded. (The “your message” in the title is also getting faux-bolded, the effect is just more subtle.) So the two easiest solutions are: — to explicitly set your

to font-weight: normal; and/or — to avoid any chance of faux-bolding by using font-synthesis: none; Here is a codepen and the results I get in Safari on iPad: https://codepen.io/djrrb/pen/OJdPBbE

If for some reason you don’t want to change the styling of the page, you can also fix this by adding font-weight: bold to your @font-face calls, so that Bungee loads as Bold instead of Regular. Hope that helps!

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: @.***>