@font face only displaying in demo html

Question

Ok so I downloaded a @font-face kit from fontsquirell, it works fine in the demo html file included in the download, but fails to render when I put it in any other file or sub folder.

I have checked the file structure and linked accordingly, i am still having this problem. Any suggestions on what I should do?

@font-face {
font-family: 'BreeSerifRegular';
src: url('..assets/fonts/BreeSerif-Regular-webfont.eot');
src: local("☺")
     url('..assets/fonts/BreeSerif-Regular-webfont.eot?#iefix') format('embedded-    opentype'),
     url('..assets/fonts/BreeSerif-Regular-webfont.woff') format('woff'),
     url('..assets/fonts/BreeSerif-Regular-webfont.ttf') format('truetype'),
     url('..assets/fonts/BreeSerif-Regular-webfont.svg#BreeSerifRegular') format('svg');
font-weight: normal;
font-style: normal;
}

The same format works for other fonts, dunno why its not working for this.

Answer 1

Its the basic problem with paths

Copy the fonts you receive and into a folder at the root lets say a font.

Then point your css to read the file in a relative pattern like

@font-face {
font-family: 'BreeSerifRegular';
src: url('fonts/BreeSerif-Regular-webfont.eot');
src: local("☺")
     url('fonts/BreeSerif-Regular-webfont.eot?#iefix') format('embedded-    opentype'),
     url('fonts/BreeSerif-Regular-webfont.woff') format('woff'),
     url('fonts/BreeSerif-Regular-webfont.ttf') format('truetype'),
     url('fonts/BreeSerif-Regular-webfont.svg#BreeSerifRegular') format('svg');
font-weight: normal;
font-style: normal;
}

---

UPDATE

The way you are defining relative path is wrong

Change ..assets to ../assets