Custom font installation for Django Project deployed to DreamHost Servers

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.

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

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

I have tried that already.

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.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.