Safari user installed fonts don't render

Question

I am using MAC OSX and my Safari version is 13.0.3. I tried installing some custom fonts into my machine. I installed the font great-vibes from https://www.fontsquirrel.com/fonts/list/popular (just an example) on my machine and it now shows under User Font section in my Font Book. I am using .otf format of the font. I now tried using it on my web application like this:

@font-face {
  font-family: 'Great Vibes'; //Added postscript name as well, did not work
  font-style: normal;
  font-weight: 400;
  src: local('Great Vibes')
}
body {
  font-family: 'Great Vibes' !important;
}

This works in Chrome and Firefox (even without the @font-face) declaration. But this is NOT working on Safari. I have tried options like -webkit-text-stroke: .5px; text-rendering:optimizeLegibility; but it does not work. I tried installing different custom fonts into my machine and they don't work on Safari either. I see that the font has been installed correctly.

NOTE: Keeping the custom font within my application code and using @font-face/src/url works just fine. The issue is when trying to access custom installed fonts on the machine.

Scathing

Answer 1

The reason for this is that Safari 12/macOS Mojave disabled display of user-installed fonts to combat browser fingerprinting, which enables online tracking through observing your system configuration—including which fonts you have installed. By only rendering the default system fonts, and of course any other internet-accessible font, your computer looks more like any other and becomes harder to track.

If you want to develop in Safari using a non-standard font, you have to use a @font-face/src/url declaration pointing to an embedded or internet-hosted font. Alternatively, you can disable the tracking protection, but that's probably not a good idea.

If you have enhanced tracking protection activated in Firefox, which also blocks fingerprinting, you should see the same behavior as Safari.

Sources: two reddit posts

Statistical

It is maddening that there isn't a defaults.write for this or a preference to allow this! – Impacted

You said, 'Alternatively, you can disable the tracking protection'. How do you do that? Unticking 'Prevent cross-site tracking' does not seem to restore the ability to display local installed fonts. – Expecting

Answer 2

You should try the Bulletproof @font-face Syntax, where the basic syntax for local fonts looks like this:

@font-face {
font-family: 'Graublau Web';
src: url(GraublauWeb.eot);
src: local('Graublau Web Regular'), url(GraublauWeb.otf) format('opentype');
}

Diffract

I am using .otf format of the font. As mentioned I don't want to use the attribute "url" as I am not maintaining the fonts on my application code. I am trying to access the fonts installed on my system. I did try src: local('Great Vibes') format('opentype') and it does not work. – Scathing

Hello, sorry, I must have misunderstood. Please see my edited answer. For further explanation, refer to the link I posted. :) – Diffract