为什么我的@Font-Faces 无法加载?

Why won't my @Font-Faces load?

我的字体不会出现在我的网站上,我不知道为什么!我真正能想到的唯一原因是,也许我加载的太多了?但是,我尝试删除其中的一部分,但情况并非如此。有什么想法吗?

代码...

#panel1 h1 {
 color: #e66854;
 font-family: MuseoSansRounded500, helvetica, sans-serif;
 font-size:30px;
}


@font-face {
    font-family: MuseoSansRounded100;
    src:url(fonts/MUSEOSANSROUNDED-100_0.OTF);
 
 font-family: MuseoSansRounded300;
 src:url(fonts/MUSEOSANSROUNDED-300_0.OTF);
 
 font-family: MuseoSansRounded500;
 src:url(fonts/MUSEOSANSROUNDED-500_0.OTF);
 
 font-family: OpenSansLight;
 src:url(fonts/OpenSans-Light.ttf);
 
 font-family: OpenSansLightItalic;
 src:url(fonts/OpenSans-LightItalic.ttf);
 
 font-family: OpenSansReg;
 src:url(fonts/OpenSans-Regular.ttf);
 
 font-family: OpenSansRegItalic;
 src:url(fonts/OpenSans-Italic.ttf);
 
 font-family: OpenSansSemiBold;
 src:url(fonts/OpenSans-Semibold.ttf);
 
 font-family: OpenSansSemiBoldItalic;
 src:url(fonts/OpenSans-SemiboldItalic.ttf);
 
 font-family: OpenSansBold;
 src:url(fonts/OpenSans-Bold.ttf);
 
 font-family: OpenSansBoldItalic;
 src:url(fonts/OpenSans-BoldItalic.ttf);
}

提前感谢您的任何建议! :)

一种对我有用的技术是在末尾添加格式:

src: url(fonts/MUSEOSANSROUNDED-300_0.OTF) format('opentype');

您需要将每个字体声明拆分为单独的@font-face 块

@font-face {
   font-family: MuseoSansRounded100;
   src:url(fonts/MUSEOSANSROUNDED-100_0.OTF);
}
@font-face {
   font-family: MuseoSansRounded300;
   src:url(fonts/MUSEOSANSROUNDED-300_0.OTF);
}
...