Custom Font Not Loading in Navigation/Sidebar and Safari, is Loading in Chrome/Firefox

[MaxFrequency]

I am having the toughest time getting a custom font to load on my Publish site. I landed on Google Font’s “Poppins” for my font. Here is the code I have in my publish.css file.

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital@1&display=swap');

.published-container {
  --font-text-theme: 'Poppins';
  --font-text: 'Poppins';
  --font-interface-theme: 'Poppins';
  --page-title-font: 'Poppins';
  --site-name-font: 'Poppins';
  --component-title-font: 'Poppins';
}

This does load in Chrome and Firefox, although the sidebar/navigation does not load in Poppins.

In Safari though, which is my default browser, the site font turns into some sort of serif font. This holds true after clearing site data, cookies, etc. and waiting for the site to update. Chrome and the like adopt the change immediately.

Does anyone have any ideas as to why…

1. Safari is not accepting this font change and defaulting to a serif font?
2. Why the navigation/sidebar are not adopting Poppins despite the use of " --font-interface-theme?"

I appreciate any help!

Chrome and the Poppins not in sidebar

Safari and Serif

Here is the site, if you care to check it out for yourself. I’ll leave the CSS as is for now.

https://www.maxfrequency.net

[MaxFrequency]

After asking in the Discord, I was given an answer to this. Long troubleshooting sessions short…

1. the import rule must be the first rule in the CSS document. I pasted mine right at the top of the document.
2. Make sure the import URL is correct. I had one only pulling in italics at one point.
3. You do not need the --font-text: bit. If you do, the browser won’t have instructions to fallback to.
4. You can put those other --font variables in the body { section of the CSS, not the .published-container {.

If you’d like to scroll through the entire troubleshooting process, you can check the Discord channel here. The team also updated some of the documentation to reflect this feedback. Hopefully, all of this helps someone in the future if needed. Thanks again for all the help!