I'm having some trouble with my CSS and the @font-face rule. I initially posted this on another platform, but I haven't gotten much feedback. I'm wondering if might have messed up the file path or something else. I've included the file paths alongside my HTML and CSS code below, but it feels like a pretty basic issue that I can't seem to figure out.
I've run into a few problems, including the font-family name not matching the actual file name, which I fixed. Now, I can't get the font to load properly. I'm working on a Mac, using Chrome as my browser, and I write code in Phoenix Code. If anyone has insights on why this is happening, I'd really appreciate it!
2 Answers
You might want to check how you're linking your font files. The path should be relative to the CSS file, not the HTML one. Double-check the URLs you've provided. For instance, if your CSS file is in /assets/css/main.css, your font URL should be relative to that. So, if your font file is in /assets/fonts/your-font-file.ttf, you should write that path correctly to ensure the browser can find it.
Definitely take a look at the server settings too! The browser only sees URLs, not your file structure. Make sure the URL you’re using in the CSS points to the correct location on the server, and use the Network tab in Developer Tools to see if the URL is loaded correctly or if there are any errors.
Thanks for the tip! I’ll check the Network tab to see if there's something wrong there.
Got it! So if my CSS is in the css folder, I need to navigate from there to the fonts folder?