My fonts won't appear on my website and I don't know why! The only reason I could really think of is that perhaps I was loading in too many? However, I tried removing a load of them and this did not appear the case. Any ideas?
The code...
#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);
}Thanks in advance for any suggestions! :)
You need to split each font declaration into separate @font-face blocks
@font-face {
font-family: MuseoSansRounded100;
src:url(fonts/MUSEOSANSROUNDED-100_0.OTF);
}
@font-face {
font-family: MuseoSansRounded300;
src:url(fonts/MUSEOSANSROUNDED-300_0.OTF);
}
...