Local font not showing in Safari for Quarto website

[EllaKaye]

Hello,

I have a local font in a font directory, both woff and woff2 formats. In my theme.scss file I have

@font-face {
  font-family: 'LEMONMILKPro-Light';
  src: local('LEMONMILKPro-Light'), url('/fonts/LEMONMILKPro-Light.woff2') format('woff2'), url('/fonts/LEMONMILKPro-Light.woff') format('woff');
}

and then

$font-family-sans-serif: "LEMONMILKPro-Light", Jost, Helvetica, sans-serif !default;

My local font is working absolutely fine on Firefox and Chrome browsers, but not on Safari.

To make things even more curious, this is the exact same set up that I had on my website built with {distill} and I have literally copied and pasted the font folder and the font-face declarations over, and the font works just fine on Safari on that site.

Any thoughts on how to get my top font choice working on Safari for the Quarto site?

Thanks!

[dragonstyle]

One theory - should the url be /fonts/... or should it be fonts/...? I can't explain why this would work in some browsers and not others.

If this isn't the issue, I'd be happy to take a closer look but would really benefit from taking a look at a minimal reproducible example that I could tinker with. Do you have something I could use?

[EllaKaye]

Hey @dragonstyle thanks for the very fast response, and your on-the-money solution! Yes, that was the issue. I was thrown by the different browsers but it was a red herring. The issue is that my distill site is deployed and has a genuine site-url, whereas my quarto-site is still in development so the relative link to the placeholder site-url didn't work. Good catch!