Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Font Family/Display Issue in Safari 12 on macOS Mojave

I just upgraded to macOS Mojave a few days ago and I have noticed an issue with the fonts displayed in Safari for sites/themes that I have created on Tumblr.

It appears that Safari reverted back to the default of Times New Roman and I'm not sure why; this is only an issue in Safari. The fonts are correct when viewing the site(s) in FF and Chrome. It is also only happening on desktop; the view on my iPhone and iPad are showing the correct font.

EX: http://romanoffsbite.tumblr.com

The font I used on this site is Calibri and it was displaying correctly until I upgraded to Mojave; now, it's loading in Times New Roman and I cannot figure out why or how to fix it.

I have searched for this issue the last day or so and all I have been able to find is the solution to the fonts showing as thin and blurry in Mojave, but there hasn't been anything, that I could find, that applied to incorrect font(s) displaying.

(the solution for the thin and blurry fonts did work)

Any assistance with this would be greatly appreciated because it is really starting to become an issue because I work for a web design and development company and if I can't see the correct font(s), then it's never going to display correctly for me.

SPECIFICS

  • OS: macOS Mojave 10.14
  • Safari: 12.0
  • Font Not Displaying: Calibri (normal, bold, italic)
  • Website Example: http://romanoffsbite.tumblr.com

Again, any help with this would be amazing! I'm not sure where else to go from here, so I have come to all of you smart folks :)

Thank You! Nicole

like image 927
Nicole Avatar asked Oct 07 '18 21:10

Nicole


1 Answers

This is because of the new no-tracking privacy features in Safari 12 + Mojave.

Web developers no longer have access to the 'traditional web-safe fonts'; only the strict set of System fonts included in /System/Library/Fonts 'from the factory'

This is a sledgehammer, break-everything response to certain sites tracking people via the set of fonts installed on their computer, and thus available to css without requiring an @font-face include...

So, now, if you want to refer to Calibri, or Menlo, or Book Antiqua, you'll have to license them and include them as web fonts, even though you can pretty much bank that the person viewing your website already has them installed!! Slower experience for everyone :-(

Grr!

EDIT: i tried disabling the new option 'Prevent cross-site tracking' in Safari 12, but that did not help with this issue...

like image 147
Peter Avatar answered Oct 02 '22 15:10

Peter