I've been exploring different code and examples online in an attempt to incorporate a custom font into my simple HTML website. Just for reference, I'm using Django.
Key files to note:
aurebesh_translator.html
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="main.css">
<p>This text should appear in aurebesh</p>
</html>
main.css
@font-face {
font-family: "aurebesh";
src: url(aurebesh.ttf);
font-style: normal;
font-weight: 100;
}
p {
font-family: aurebesh;
font-weight: 100;
}
The file structure looks like this:
| templates
| - ...
| - main.css
| - aurebesh_translator.html
| - fonts
| -- aurebesh.ttf
... where the aurebesh.ttf file is the font file associated with the font I wish to utilize.
Everything seems to be correctly formatted based on my research online for using a custom font. Strangely, if I move these files to my desktop (so that only main.css, aurebesh_translator.html, and fonts/aurebesh.ttf are present) and open aurebesh_translator.html in a browser, the font loads and applies successfully! What's puzzling is that when I integrate these files with the rest of my website's files, the custom font stops working. I've tried opening it in both Chrome and Firefox, but neither browser displays my custom font.
When I try to access the page, this is the error message that displays in my terminal:
[01/Jun/2020 00:08:18] "GET /articles/aurebesh_translator HTTP/1.1" 200 127
Not Found: /articles/main.css
[01/Jun/2020 00:08:18] "GET /articles/main.css HTTP/1.1" 404 4061
How can I resolve this error?