Fonts will not load on Safari on desktop and iOS

support
1

I am currently building a site on hugo using Tailwind CSS, deployed on netlify

I have the following self-hosted fonts

  • /static/fonts/bugaki.woff
  • /static/fonts/bugaki-oblique.woff

and have defined the following in /assets/css/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: 'bugaki', serif;
    src: url('../fonts/bugaki.woff') format('woff');
}

@font-face {
    font-family: 'bugaki-oblique', serif;
    src: url('../fonts/bugaki_oblique.woff') format('woff');
}

For some reason, this self-hosted loads on all browsers EXCEPT on Safari, and I cannot for the life of me figure out why, I have been trying to look for answers all over the internet and all the solutions provided I have tried, do not work.

Does anyone know how to resolve this issue?

2

This is not a Hugo question.

3

Remove ../fonts
It’s in static folder and shall be just /fonts/

4

Also, that is not that same as bugaki_oblique.woff