Using a webfont (Tablet Gothic from Typekit/Adobe Fonts) for a project at work, we noticed that on Windows and Linux machines, regardless of browser, the bottom bit of the bowls on the p's and q's are getting cut off, while the descenders remain intact. Using a thicker variant of the font doesn't eliminate the problem, only makes it marginally less obvious.
image 1.
image 2.
(these are screenshots from TeamViewer, please excuse the graininess)
My boss is hesitant to let me post links to our dev sites on here, but if the image doesn't cut it for explanation, I'll convince her to let it slide and post the link. I'd try to emulate it here w/ code but I can't seem to reproduce it literally anywhere.
I've tried to fix it with -webkit-font-smoothing, text-rendering, line-height stuff, increasing the weight and the size, but the best I've been able to get is letters with intact counters but with flat outer bottoms.
Does anyone have any idea what's going on? Our client really loved the type choices here but if this can't be fixed it might be a dealbreaker.
Edit: here's a reproduction that's probably only visible on Windows and Linux machines:
Edit2: confirmed that this example suffers the same problem on non-macOS machines.
h2 {
font-family: "tablet-gothic", sans-serif;
font-size: 2rem;
font-weight: 300;
color: #005556;;
}<!DOCTYPE html>
<html lang="en-US">
<head>
<!-- General meta tags needed-->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Needed for responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hinson & Hale Medical Technologies</title>
<!-- Adobe Fonts -->
<link rel="stylesheet" href="https://use.typekit.net/vbf4dsu.css">
<!-- FontAwesome -->
<script src="https://kit.fontawesome.com/914ac9a7cf.js" crossorigin="anonymous"></script>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>
<body>
<h2>FDA-Approved</h2>
<h2>Frequently</h2>
<h2>ppppppppp</h2>
<h2>qqqqqqqqq</h2>
</body>