CODEWITHSUNDEEP
htmlcssfont-face
Spax
Spax

Reputation: 3

@font-face not working locally but works when linked externally

So, I have a .ttf font (plus others) that I'm using for a website, with the code formatted as follows: 

@font-face {
    font-family: DEP;
    src: local("fonts/DEP/DEP.ttf") format("truetype");
    src: local("fonts/DEP/DEP.woff") format("woff");
    src: local("fonts/DEP/DEP.otf") format("opentype");
    src: url(https://codehs.com/uploads/98892640bda8f3fe5654e3c6d20d5c8c) format("truetype");
}
I know it's good to have a fallback link in case the local files fail to load, but I noticed when I was editing the code offline that the local files weren't working. I triple-checked the folder structure, tested the code (minus the external link) on the main site to see if it was just my html previewer, etc etc. I don't understand why it won't link properly.

My code is also on github if you want to investigate this further. Thanks!

Upvotes: 0

Views: 266

Answers (1)

myf
myf

Reputation: 11293

local() accepts locally installed fonts' system identifier, not path to file, see: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face#specifying_local_font_alternatives

Upvotes: 1

Related Questions