css font-face issues...

Question

Hi guys I have this code in my css file from the @fontsquirrel generator

/// changed the code to how it is now ///

@font-face {
font-family: 'AdLibRegular';
src:    url('../fonts/adlib-webfont.eot');
src:    local('☺'), url('../fonts/adlib-webfont.woff') format('woff'), 
        url('../fonts/adlib-webfont.ttf') format('truetype'), 
        url('../fonts/adlib-webfont.svg#webfontmAc00Ivp') format('svg');
font-weight: normal;
font-style: normal;
}

.AdLib {
        font-weight: normal;
        font-style: normal;
        line-height:normal;
        font-family: 'AdLibRegular', sans-serif;
}

this is stored in a folder called css and the fonts are stored in a folder called fonts.

I can't get this to work when in the html page I'm calling it for example

<h1 class="AdLib">Testing Testing 1 2 3</h1>

I can't work out what I'm doing wrong at all.

Any ideas?

thanks in advance stu

//// I have now changed them all to url ('../fonts/adlib etc and it still doesn't work. I'm previewing locally - is this it?

Answer 1

I've run into problems with font-face where the URL starts with a '/' - try editing the src URL to be a relative URL:

eg

@font-face {
font-family: 'AdLibRegular';
src:    url('../fonts/adlib-webfont.eot');
}

(obviously point to the correct folder location)

Answer 2

could be a problem with the path, where is the font folder located according to the css file?

if the font folder is in the css folder you should use the following path:

src:    url('fonts/adlib-webfont.eot');

if it's next to the css map you need to use the following path:

src:    url('../fonts/adlib-webfont.eot');

../ is used to go back a folder