Not for any particular reason, but I always tend to do this relatively, i.e. by removing the '~/css/' (and '~/css//' where you have that) from the url. So you'd just have something like:
If this still doesn't work then I'd check to see if the style sheet is loading correctly at all. Failing that it could be something to do with the mime-types on the server not serving particular web font files correctly.
@font-face not working
Hi everyone,
I've been reading a dozen topics on implementing @font-face in Umbraco, but I can't seem to get it working. Any help would be greatly appreciated.
I currently have the below tree in my solution:
The astral-style.css file has below code:
@font-face {
font-family: 'FontAwesome';
src: url('~/css//fonts/fontawesome-webfont.eot?v=3.2.1');
src: url('~/css/fonts/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('~/css/fonts/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('~/css/fonts/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('~/css/fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
font-weight: normal;
font-style: normal;
}
Can anyone tell me what I'm doing wrong ?
Big thanks!
Manu
Hi Manu,
Not for any particular reason, but I always tend to do this relatively, i.e. by removing the '~/css/' (and '~/css//' where you have that) from the url. So you'd just have something like:
If this still doesn't work then I'd check to see if the style sheet is loading correctly at all. Failing that it could be something to do with the mime-types on the server not serving particular web font files correctly.
Hi Manu. As Dan suggests, have you got your MIME types setup correctly in IIS/web.config?
<?xml version="1.0" encoding="utf-8"?> <configuration> <system.webServer> <staticContent> <remove fileExtension=".woff" /> <mimeMap fileExtension=".woff" mimeType="application/font-woff" /> <remove fileExtension=".ttf" /> <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" /> <remove fileExtension=".otf" /> <mimeMap fileExtension=".otf" mimeType="application/octet-stream" /> <remove fileExtension=".eot" /> <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" /> </staticContent> </system.webServer> </configuration>Hey guys,
Thanks for your replies.
After messing around alot (and trying the above feedback), I made it work!
The mistake (as often) was simpler than I thought, the reference to my CSS file was mistyped....
Stupid mistake, but it works so thanks guys!!!
Manu
is working on a reply...