I added the clause which uses RobotoCondensed as font-family on a couple of more places of style (both in style.css at the bottom and in ie.css at the bottom), and now it appears in Firebug Lite, but it’s still not being used on the screen.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
font is simply not shown in firebug. Instead, the default line from style css is applied:
Possibly you have some invalid markup or CSS.
Check the validity of your markup: http://validator.w3.org
Check the validity of your CSS: http://jigsaw.w3.org/css-validator/
After a long series of trial and error I found out the reason IE9 was displaying the font in some places and not in others. It seems when I use an embedded font I shouldn’t use the keyword “normal” for font-weight when using the shorthand “font:” property. So:
font: 15px 'RobotoCondensed' !important; works, and
font: 15px normal 'RobotoCondensed' !important; doesn’t
Of course this only applies to IE, normal browsers don’t care about the keyword.
Here you can confirm that the font declaration is being read, and the font is still not being applied on screen when in IE8 mode: http://eventinvestment.eu/wp-content/themes/eventinvestment/fonts-test/screen01.jpg
This one really has me confused.
Fixed, by myself 🙂
I googled “@font-face ie8 not working” and reached this page at stackoverflow: http://stackoverflow.com/questions/7582401/css-font-face-not-working-in-ie8
I saw the solution and suspected the font wasn’t working because the second line in its code (the one about the .eot) was missing from my code. Added “src: url(‘fonts/RobotoCondensed-Light.eot’);” so my font-face clause is looking like this:
@font-face {
font-family: 'RobotoCondensed';
src: url('fonts/RobotoCondensed-Light.eot');
src: url('fonts/RobotoCondensed-Light.eot?#iefix') format('embedded-opentype'),
url('fonts/RobotoCondensed-Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Now the font displays under IE8 mode and even under IE7 mode.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Really good work!
Possibly in the future you may want to use a font-face generator like FontSquirrel’s to generate the different browser hacks too 🙂
I was using that (last week we had a 40-post topic about it: http://ww.wp.xz.cn/support/topic/fonts-included-with-font-face-are-not-rendered/page/2?replies=44#post-4045532) until I found out that fontsquirrel strips my font files of their Cyrillic glyphs. After a couple of days of wondering if my font files weren’t loading, finding that they are, but the glyphs aren’t there and I get my font right only in Latin script was quite a revelation. 🙂
I removed the woff and svg lines from my font-face declaration but I don’t know why I removed the first .eot declaration as well. 🙂
