Annin•3d ago

How to load fonts in /static?

Using Fresh with tailwind By doing

@font-face {
  font-family: "MyFont";
  src: url("/MyFont-Regular.woff2");
}

@font-face {
  font-family: "MyFont";
  src: url("/MyFont-Regular.woff2");
}

and

<div class="font-[MyFont]">wheres my font</div>

<div class="font-[MyFont]">wheres my font</div>

It shows the font on localhost when running deno task start, but not on the actual site. Browser console shows

downloadable font: download failed (font-family: "MyFont" style:normal weight:400 stretch:100 src index:0): status=2147746065 source: https://mysite.deno.dev/MyFont-Regular.woff2

GET https://mysite.deno.dev/MyFont-Regular.woff2 returns 404 css and font file are both just in /static Let me know if there's other info I should provide, thanks in advance

4 Replies

marvinh.•3d ago

Does the casing of the filename match the casing of the url in the font-face declaration? usually a 404 of a static file means that either the casing is wrong or that it's missing in the static/ directory entirely

AnninOP•3d ago

I just double checked, the font file is in static and the casing of url and font file name does match What does really confuse me is how it works locally but not on the deployed version

marvinh.•3d ago

Is it maybe not part of the git repo? During deployment the repo is cloned and maybe you haven't committed that yet

AnninOP•2d ago

oh I should've thought to check that Turns out I'm a bit too new to git and didn't realise how git commit -a works Thanks for the help!

How to load fonts in /static?

Did you find this page helpful?