I've used sIFR successfully for simple applications like headings, I'm trying to use two different fonts simultaneously – one for a heading and one for a menu.
The heading works, but not the menu. I'm using the Tofurious WordPress theme. This is the section of the theme's stylesheet that governs the menu font and link styles:
/*MENU COLORS****************/
#menu {
background:#bc7d90;
}
#menu li a {
font:11px Arial, Helvetica, sans-serif; /*MENU FONT STYLES*/
text-transform: uppercase;
color:#fff; /*MENU FONT COLOR*/
}
#menu li a:hover {
color:#ecd1d9; /*MENU FONT COLOR WHEN HOVERING*/
}
I entered #menu li a
as the Item To Replace
on the sIFR settings page, and then used this code:
.sIFR-root { font-size:15px; font-weight:normal; color:#fff; }
a { text-decoration:none; color:#fff; }
a:hover { color:#fff; }
The font appears – but not with any of the styles specified above, and it appears on the blog in an unexpected way. You can see the example at this address: www.laurenparkinson.com/blog
Also, the actual sub-menu items are not appearing at all.
Best Answer
You'll do yourself a big favor by ditching sIFR completely for @font-face which is now supported in all major browsers including IE since version 4 (more compatibility information: http://webfonts.info/wiki/index.php?title=@font-face_browser_support).
Just make sure your fonts are licensed for embedding.
Online eot converter: http://www.kirsle.net/wizards/ttf2eot.cgi