Troubleshoot fonts

[MirandaEcho]

"The new fonts are inconconsistently rendering on some browers and some pages. HTML allows you to program backup fonts, so the "Neue Haas Groetsk Text" appears to be default, but if browers can't find it it renders Helvetica. For me, on Safari and Adina on Chrome, it looks like the site is showing Helvetica for Headlines on the homepage and only showign the new ""Neue Haas Groetsk Text" font on article pages. Its hard to check and know for other elements but likey happening with more than headlines. Many of the fonts just look like Helvetica to me. Above image is homepage. below image is article page"

At one point, @joshdarby and I discussed this and determined its a CSS fix we need to implement on our end.

This is non-billable and needs to be logged directly in the covered support project in Everhour

[joshdarby]

At first look, I assumed this was because in our @font-* declarations, we weren't wrapping the typekit fonts in quotes

https://github.com/INN/umbrella-citylimits/blob/b029d6365ca96c0ef82fa7c94e5f5d5fe67b2936/wp-content/themes/citylimits/less/_variables.less#L20-L21

However, here's Adobe's usage instructions for Neue Haas Grotesk Text specifically:

font-family: neue-haas-grotesk-text, sans-serif;
font-style: normal;
font-weight: 400;

[joshdarby]

What's even more strange is that they're complaining about it working on some pages, but not others. All places that use that font are using the same @font-body variable, so if it works in one spot, it should work in another.

@benlk any ideas on this?

[joshdarby]

As it stands currently on Safari:

"neue-haas-grotesk-text-", sans-serif on Safari

"Helvetica", sans-serif on Safari

[joshdarby]

@MirandaEcho Could you attach the screenshots he sent over?

[MirandaEcho]

His screenshots were posted in this spreadsheet, but there's no way to grab them from there. There's also some more info from him, its in row 44: https://docs.google.com/spreadsheets/d/1Wsk4aClpbsxoiTSgm2yGQOY-6T9r_MrhZ-nT9msFnys/edit#gid=0

Let me know if I need to grab additional info from him, but I was able to see the issue in my own browser as well - in most places the correct fonts are not rendering. On article pages, the headline is correct, but seemingly nowhere else, including the homepage:

Correct font in headline:

[joshdarby]

Okay, so, this isn't an issue then with the neue-haas-grotesk-text font. The issue is that the article header is using roc-grotesk and the homepage is using neue-haas-grotesk-text when it should also be using roc-grotesk. That explains why they are seeing the discrepancy 😅