Chrome hates “Hoefler Text”
I was working on a slap-dash sorta project and setting up a WordPress site with a Twenty Nineteen child theme to bash it out. While I was testing my work in Chrome, I got this:
This only affected Chrome, but I admittedly hadn’t tested it further in Opera or Edge, which both use the same Chromium engine. I thought it could be a server-side encoding issue, but I couldn’t confirm it and couldn’t find anything in a hasty (non-Google) search.
I inspected element and saw that Twenty Nineteen explicitly defines a font-family on text fields:
Ugh. I mean, it’s cool and all to use a different font for form elements, but it’s certainly something that flies under the radar pretty easily, especially when creating a child theme off of it.
I commented out “NonBreakingSpaceOverride” and nothing. Then “Hoefler Text”. Bingo!
All I had to do from there was override the declaration with one of my own, using the same System Font stack the rest of the site uses. Boom.