March 7, 2012
@font face only displaying in demo html
Question by indrago
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 by Starx
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
