On January 17, 2020, I learned...

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:

What’s up with those gross symbols in the text field?

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:

button, input, select, optgroup, textarea {
  "NonBreakingSpaceOverride", "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
}

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.