Chrome hates “Hoefler Text”

January 17, 2020 , I learned...

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:

[[code class="language-css"]]czoxNTE6XCJidXR0b24sIGlucHV0LCBzZWxlY3QsIG9wdGdyb3VwLCB0ZXh0YXJlYSB7CiAgXCJOb25CcmVha2luZ1NwYWNlT3ZlcnJpe1smKiZdfWRlXCIsIFwiSG9lZmxlciBUZXh0XCIsIFwiQmFza2VydmlsbGUgT2xkIEZhY2VcIiwgR2FyYW1vbmQsIFwiVGltZXMgTmV3IFJvbWFuXCIsIHNle1smKiZdfXJpZjsKfVwiO3tbJiomXX0=[[/code]]

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.