Heads Up E-commerce Users - Certain Fonts Won't Render Properly With Chrome

[Ozalcin (Mustafa Ozalcin)]

Hi there,

I just wanted to provide some information for others that may have been having the same issue.

Basically, the selection button text in the “Add to Cart” element was rendering as in the attached image, in Chrome and chromium based browsers, on certain devices. The text was cut off and no amount of changes to Typography size or padding made any difference.

The Webflow support team couldn’t help and advised I add custom code for each browser and device. (Yes, they actually said that!)

After a lot of different checks, I identified it was “basically” being caused by the font (Futura) and the issue corrected when I changed it to Arial. The weird thing is, it was happening at random; so sometimes it would render correctly and other times not…

For the record, there were no issues with Safari.

---

For reference I faced the issue on a Samsung Galaxy S6 Edge and a Sony Experia (both google chrome) and on a Samsung Galaxy Tablet on a chrome based browser… (The Webflow support team DIDN’T have any issues on another Samsung device. But again, the issue was recurring at random, so I’m not sure how thoroughly they tested for the problem).

The issue may occur with other “non-standard” fonts, but I haven’t tested any others. I’m just relieved the button text shows properly.

Cheers.

[vincent (Vincent Bidaux)]

Is the font Futura Pt from google fonts? Or Futura PT from Adobe Fonts? Can you provide a read only link to the project and a link to the live page please?

[vincent (Vincent Bidaux)]

This is kind of a know issue for a long time, it usually happen on select fields only, when you have set a height for the field. Don’t se the height for the field and the text will appear entirely. To further dimension the field, use padding instead. Sometimes just a line-height bigger value can fix the issue.

[Ozalcin (Mustafa Ozalcin)]

Hi Vincent,

Thanks for the feedback. I did try adding ample amounts of line height and padding but didn’t work. In the end I removed the line height and just set it to Arial.

Here’s the link https://preview.webflow.com/preview/toggery?utm_medium=preview_link&utm_source=designer&utm_content=toggery&preview=b427414b2e9e1f41b6a1e8ca4c671759&mode=preview

Live page is toggery.webflow.io

Only on staging at the moment.