Open Sans, letter 'J' gets clipped

[mykytabatrak]

Description
When using the font on the web, if overflow is set to hidden, some letters get clipped at the edge, the ones that I've noticed are italic 'y', 'p' 'A', 'J', 'j' 'x', and normal 'J' and 'j'

To Reproduce
You can see it on Google Fonts or if you use this font on the web page with the following styles on the element it's inside:

.font {
	font-family: "Open Sans";
	font-size: 3rem;
	margin: 0 0.25rem;
	overflow: hidden;
}

Codepen example

Expected behavior
Expected all letters to be fully visible inside their container.

Screenshots

[justingrant]

In addition to clipping, this behavior also causes misalignment between Open Sans and other fonts when used together. For example, here's a screen capture from Chrome Dev Tools from a page of my company's web app. The top heading is Open Sans, the bottom text is Inter. Our app's target audience is design professionals (architects) so this kind of thing is bad!

The edge of the Open Sans J is 2x outside of the border of the containing <div>