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,
My web site adrees is marcoalexwebdesign.site11.com .