web font doesn't get applied! @font-face

问题:

I'm struggling with web fonts, I'm using DejavuSans to display Georgia ქართული text.

Unfortunately it doesn't get applied and I'm out of ideas.

@font-face {
    font-family: 'DejaVuSans';
    src: url('font/DejaVuSans.eot');
    src: url('font/DejaVuSans.eot?#iefix') format('embedded-opentype'),
         url('font/DejaVuSans.woff') format('woff'),
         url('font/DejaVuSans.ttf') format('truetype'),
         url('font/DejaVuSans.svg#bolnisiregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body
{
   font-family: 'DejaVuSans' !important;
}

I downloaded it from here: http://www.fonts2u.com/dejavu-sans.font

And I applied it here: http://mac.idev.ge:800/breakmedia/

Chrome inspector tells me that css is correctly overwritten, but where are the fonts themselves??

回答1:

Urls are relative to the folder containing the css file. So your url to the font needs to be absolute and point to the root e.g:

/font/DejaVuSans.eot

or relative and point to one folder up:

../font/DejaVuSans.eot

etc depending on where your stylesheet and fonts are located.