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!

CodePudding user response：

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