Cant get @font-face to work on my new web site

HTML & CSS
1

Hi everyone,

I Cant get @font-face to work on my new web site.
I tryed it before on other web sites and it worked just fine.

Here is the code i am using:

CSS:

@charset "utf-8";

@font-face {
font-family:"Caviar Dreams",sans-serif !important;
font-style: normal;
src:url ("../fonts/CaviarDreams.ttf") format('truetype');

src:url("../fonts/CaviarDreams.eot") format('eot');

src: url("../fonts/CaviarDreams.svg") format('svg');

src:url("../fonts/CaviarDreams.woff") format('woff');

src:url("../fonts/CaviarDreams.otf") format('otf');
}

/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}

/*
Dreamweaver Fluid Grid Properties
----------------------------------
dw-num-cols-mobile: 5;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 10;
dw-gutter-percentage: 25;

Inspiration from "Responsive Web Design" by Ethan Marcotte 
http://www.alistapart.com/articles/responsive-web-design

and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */
body{
background-image:url(../images/background/wraper_bg.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-size:100% 100%;
font-family:"Caviar Dreams", sans-serif !important;
}
.caviar{
font-family:"Caviar Dreams", Arial, Helvetica, sans-serif ;
}
.index_bg{
width:100% !important;
height:100% !important;
background:url(../images/graphics/index_bg.png) !important;
background-size:cover !important;
}
.welcome_image{
position:absolute;
top:35%;
width:95% !important;
margin:2% !important;
}
.nav{
color:#FFFFFF !important;
font-family:"Britannic Bold" !important;
font-size:14px;
font-weight:lighter !important;
}
.background_white{
background:rgba(255,255,255,0.7);
}
.background_black{
background:rgba(0,0,0,0.65);
}
.background_black_2{
background:#000 !important;
}
.background_noir{
background:rgba(179,1,1,0.7);
}
.background_purple{
background:rgba(152,131,201,0.7)!important;
color:#FFFFFF !important;
width:100% !important;
height:25px;
text-decoration:none !important;
font-family:"Caviar Dreams" ;
border:0px !important;
margin:0px !important;
padding:0px !important;
}
.background_purple:hover{
background:#FFFF00!important;
color:#000 !important;
width:100% !important;
text-decoration:none !important;
font-family:"Caviar Dreams" ;
border:0px !important;
}
.white{
color:#FFFFFF !important;
} 
.black{
color:rgba(0,0,0,1) !important;
}
.red{
color:#B30101 !important;
}
.yellow{
color:#FFFF00 !important;
}
.black_span{
background:#000000 !important;
color:#FFFFFF !important;
margin:1% !important;
margin-left:5px !important;
padding:5px !important;
}
.black_span_margin1{
margin-left:0px !important;
}
.black_span_margin2{
margin-left:0px !important;
}
.border_white{
border:3px solid #FFFFFF !important;

margin:0px !important;
padding:0px !important;

}
.border_gold{
border:0px solid #000!important;
margin:0px !important;
padding:0px !important;

}
h1, h2, h3, h4, h5, h6{
font-family:"Britannic Bold" !important;
font-weight:lighter !important;
color:#FFD700 !important;
margin-left:2% !important;
margin-right:2% !important;
margin-top:2% !important;
margin-bottom:2% !important;
}
p{
font-family:"Caviar Dreams", Arial, Helvetica, sans-serif !important;
font-size:16px !important;
color:#FFFFFF !important;
margin-left:2% !important;
margin-right:2% !important;
margin-top:2% !important;
margin-bottom:2% !important;
}

.text-small{
font-size:12px !important;
}
.caviar{
font-family:"Caviar Dreams" !important;
}

I am trying to use the font Caviar Dreams on my new web site but i cant get it right,
i would appreciate if another pair of eyes could enlighten me on what have i done wrong this time,
I also would like some help cross browser testing tips, it seems that on IE 9 and 10 the header of my web site is blue instead of black, you can see it here [URL=“http://netrenderer.com/index.php”]http://netrenderer.com/index.php[/URL, how can i fix this.

My web site adrees is marcoalexwebdesign.site11.com

2

I think you’ll find the problem is that in your font-family declarations you’ve inserted a space:

font-family:"Caviar Dreams",sans-serif !important;

but there isn’t one in the font name:

src:url ("../fonts/CaviarDreams.ttf") format('truetype');
 
src:url("../fonts/CaviarDreams.eot") format('eot');
 
src: url("../fonts/CaviarDreams.svg") format('svg');
 
src:url("../fonts/CaviarDreams.woff") format('woff');
 
src:url("../fonts/CaviarDreams.otf") format('otf');

Remove the space and all should be well. :slight_smile:

3

I tried that also and it doesnt work.

4

That’s weird, because it worked fine when I tried it in Firebug.

Edit: I’ve just had another look and it seems to be working on your site now. Has you resolved the issue?

5

i already fixed it, i am working with dreamweaver, so i uninstalled the font from my computer and choose add webfont, then dreamweaver created a stylesheet with the ttf’s and svg,'s and eot’s and linked it to the main stylesheet, i think that its because of the folder were i put the font’s source, i guess it has to be named webfonts.
Thank’s any way.

6

It shouldn’t matter what you call the folder, as long as you ensure you reference it correctly in your CSS. And you must have done, because as I say, it worked fine on your site for me after I changed the font name in Firebug. :slight_smile: