Search code examples
csshtmlfont-face

@font not working from fontsquirrel

I'm trying to use this font: http://www.fontsquirrel.com/fontfacedemo/eb-garamond So I download the type kit and placed it in the correct directory.

CSS:

@font-face {

font-family: 'EBGaramondSC';
src: url('/EBGaramondSC-webfont.eot');
src: url('/EBGaramondSC-webfont.eot?#iefix') format('embedded-opentype'),
     url('/EBGaramondSC-webfont.woff') format('woff'),
     url('/EBGaramondSC-webfont.ttf') format('truetype'),
     url('/EBGaramondSC-webfont.svg#EBGaramondRegular') format('svg');
font-weight: normal;
font-style: normal;
}

p.style2 {font: 18px/27px 'EBGaramondSC', Arial, sans-serif;}

HTML: [p class="style2"] Alfab Solutions, LLC is a custom security firm who focuses on rural secruity solutions. We offer rugged, secure camera systems which integrate into our SSL encrypted website. We provide 24/7 access to your security footage, so you can have peace of mind that your assets are safe. [/p] Ignore brackets

Firebug doesn't even show the correct font image. What gives?
I have a weird directory structure. The index is .php and it is generated from a template file. So my fonts are in the template directory as they should be since they only affect the html there.

Solution

  • If you look at the CSS code, you will notice that the url are all absolute paths (do you know about relative and absolute paths? If not, read about them :D )

    @font-face {
   src: url('/EBGaramondSC-webfont.eot');
}

    Notice the /?

    It should be: 

    src: url('/templates/EBGaramondSC-webfont.eot');

    Or, if the font files are in the same folder as the CSS:

    src: url('EBGaramondSC-webfont.eot');

    Opening the Chrome Inspector (That outputs 404 warnings) tells me that:

    Failed to load resource: the server responded with a status of 404 (Not Found) http://www.alfabsolutions.com/EBGaramondSC-webfont.svg

    So yeah, that! Good luck.