Menu
I'm in the process of updating a site for someone, and I'm trying to get rid of a global @font-face and apply it only to specific elements.
It was defined like this:
@font-face {
font-family: "neutra";
src: url( /styles/NeutraDisp-Bold.eot ); /* IE */
src: local("Neutra Display"), url( /styles/NeutraDisp-Bold.ttf ) format("truetype"); /* non-IE */
}
@font-face {
font-family: "futura";
src: url( /styles/FuturaStd-Heavy.eot ); /* IE */
src: local("Futura Std"), url( /styles/FuturaStd-Heavy.ttf ) format("truetype"); /* non-IE */
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
font-family: neutra, Arial, Helvetica, Tahoma, Geneva, sans-serif;
}
I only want it on a div that has the class .header and legends (and a few other tags, eventually) so I modified the CSS to look like this instead:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
font-family: Arial, Helvetica, Tahoma, Geneva, sans-serif;
}
@font-face {
font-family: "neutra";
src: url('../../styles/NeutraDisp-Bold.eot'); /* IE */
src: local("Neutra Display"), url('../../styles/NeutraDisp-Bold.ttf') format("truetype"); /* non-IE */
}
@font-face {
font-family: "futura";
src: url('../../styles/FuturaStd-Heavy.eot'); /* IE */
src: local("Futura Std"), url('../../styles/FuturaStd-Heavy.ttf') format("truetype"); /* non-IE */
}
legend{
font-family: neutra, Helvetica, Arial, sans-serif;
letter-spacing: .125em;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
}
.header{
width: 75em;
height: 12.375em;
background-color: #FFFFFF;
margin: auto;
font-family: neutra, Helvetica, Arial, Tahoma, Geneva, sans-serif;
}
However, the .header font-family is being ignored. All of the other declarations in that rule are used, and Firebug shows the font-family, which indicates to me that it's valid CSS.
In addition, the legend rule works perfectly, and shows the correct font.
Note: I moved the fonts and various other things around when I started working, but I know the new font paths are correct, because the legend rule works. I've also tried "neutra" and 'neutra'.
A pastebin of the entire CSS is here, if you think the problem is somewhere else. I've also created a jsfiddle with a fontface included to see an example of it being ignored.
Old Update The jsfiddle is doing what it should. I have no idea what is different in my own code.
I've added the offending rule. I think I'm missing something about rule weights, which would be why a lower rule still isn't overriding a higher one.
845
It's an issue of precedence. Check it out at w3:
http://www.w3.org/TR/CSS2/cascade.html
Your first rule which sets the default as Arial also directly applies the font-face to most html elements. This is unnecessary and causing your problem. Rather you should just set it once, on a top level element like html.
/* this single rule applies the Arial font to the whole document tree under <html> */
html { font-face: Arial, etc; }
/* this would set the font on .header, and everything inside of it */
.header { font-face: neutra, etc; }
In your case, p { font-face: Arial; } and div { font-face: Arial; } and etc beat your your singly nested .header rule. If you cut that long rule back to just a top level element, it will solve your problem.
Small example of the css cascade here, with the original long rule declaration:
<html>
<body>
My text is Arial because I exist under html and there are
no other rules modifying me.
<div class="header">
My text is neutra because I'm a direct child text node of "header"
<p>
my text is Arial because of the rule on "p", which in turn overrides
the rule on "header"
</p>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
