Custom font installation for Django Project deployed to DreamHost Servers

[karldamus]

I have deployed my Django project to my site registered on DreamHost. I have my styles linked correctly but I can’t seem to get my custom font installed. Here is the file structure in question:

-- static
 	 |-- imported
	 | |-- fonts
	 | | |-- SF-Pro-Text-Bold.otf
	 |
	 |-- css
  	 | |-- main.css

I would like to retrieve SF-Pro-Text-Bold.otf from my main.css file using the @font-face rule. Here is what I have:

@font-face {
  font-family: 'sfpro';
  src: local("SF-Pro-Text-Bold"), url("../imported/fonts/SF-Pro-Text-Bold.otf") format("opentype");
}

I have also tried a various number of different combinations of the url() statement (ex. …/…/). I just can’t seem to figure out how to get the font to connect. Any help would be appreciated. If someone has solved this problem before, please let me know.

[habilis]

Have you tried an absolute URL, specifically a site-relative absolute-URL? I.e:

... url("/imported/fonts/SF-Pro-Text-Bold.otf") ...

[karldamus]

I have tried that already.

[habilis]

You might double-check that the font is where you expect it. I.e. enter the URL in a browsers address bar:

Maybe: example.com/imported/fonts/SF-Pro-Text-Bold.otf
Or maybe: example.com/static/imported/fonts/SF-Pro-Text-Bold.otf

If the font is found, the browser will offer to download it. If not, you’ll get a 404 error.

You also might check Django’s STATIC_URL setting, and also use the browsers web-tools to check that the @font-face rule is being loaded by the browser.