HTML5/CSS3 - @font-face issues

So, I am in the middle of making my website, www.errordenied.com, and have recently come into difficulty with implementing @font-face within my CSS. I am finally making my way back into web dev, so my markup isn't the best, but here is what I have:

HTML

CSS

All of my font files are in the same directory as my CSS and HTML, but in a folder labeled "fonts." In my CSS, I point towards that folder, but I am not getting the font when I load my page. I want the label "Error Denied" to be in the font Existence-Light, but I am having trouble. Please help me if you can - sorry for all of the text ;)


Cheers,

 

Brennan Riddell

So you have the following directory structure?




  • TLD

    • index.html


    • css

      • style.css

    • fonts

      • a whole bunch of fonts




 


If that's how it is, my guess would be the css is trying to find the 'fonts' folder inside the 'css' folder.

If the 'fonts' folder is inside the 'css' folder, then your use of quotes might be fucking with it. Doesn't the entire path typically go in quotes? Right now you only have the font name in quotes, and "fonts/" outside of the quotes when referencing the path.

Try changing

 url(fonts/'existence-light.eot');

to

url('fonts/existence-light.eot');

When defining a directory, you must define the entire directory. Without all of the directory defined there is no way for the compiler to tell were the file actually is. This is actually pretty universal in programming. With characters as parameters for a function (a.k.a URL finding) it tries to find it as a variable or as if it is defined as a variable. So it will ignore and try to find the defined string which was not fully defined. 

Folders are directories as well :P

That fixed it - thanks! None of the online resources I found included the entire directory within the quotation marks, but that fixes it :D

Cheers,

 

Brennan Riddell

I know the directory needs to include the complete directory, and it did, in my case. The problem was the selected directory; only the .otf file was actually incldued in the quotation marks. I have been working with C++ a lot for the past 9 months, so my CSS and HTML syntax isn't the best.