How to (and how not to) load a css file that uses @font-face

I'm trying to load some personal fonts (@font-face) from a css file.

If I use:

<link href="css/style.css" type="text/css" rel="stylesheet" media="all">

the fonts don't load.

However, using:

<style>@import url('css/style.css');</style>

they load!

Shouldn't the first method work as well? That's the one I've always used... it's my first time using @font-face though.

Note that with the 1st method the CSS is being applied just fine. It's just the font's that don't load...

Edit:

My CSS starts like this:

@font-face {
    font-family:'MyFont-Bold';
    src: url('../type/MyFont-Bold.eot');
    src: url('../type/MyFont-Bold.eot?#iefix') format('embedded-opentype'),
         url('../type/MyFont-Bold.woff') format('woff'),
         url('../type/MyFont-Bold.ttf') format('truetype'),
         url('../type/MyFont-Bold.svg#MyFont-Bold') format('svg');
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-2212;
}

Solution

create font.css and in style.css @import(font.css)

read this for ur second question: http://www.htmldog.com/guides/css/advanced/atrules/