I've used the the Facelift Image Replacement [http://facelift.mawhorter.net/] code in non-SS projects before and would like to impliment it in a SS site. So far I've been unable to get it to work properly. Has anyone tried this or something similar? I've tried the siFR module but never got that one working right either.
I stumbled upon the Font Squirrel website [http://www.fontsquirrel.com/], downloaded some of their "@font-face kits" and gave them a try. They seems to work fine in the browsers I've tested in, with far less hassle, so I think I may go this route, rather than using image replacement.
Still, if anyone has any experience with image replacement in SS I'd be interested in hearing about it!
First I downloaded a font-face kit from Font Squirrel [http://www.fontsquirrel.com/fontface]. I unzipped it and put the stylesheet.css file in my themes css directory [themes/myTheme/css] and the font files into a directory I created in my theme path [themes/myTheme/fonts].
I then edited the stylesheet.css file and inserted the relative path to the font directory into all the url properties [url('../fonts/fontname_-webfont.eot'); etc.]. I also made note of the font name used in the font-family property.
Then, within my layout.css stylesheet [themes/myTheme/css/layout.css] I inserted [email protected] url("stylesheet.css");' at the top.
After that all I needed to do was add the 'font-family' property using the font name from stylesheet.css to whatever style selectors I wanted to change.
I think I used <% require themedCSS(stylesheet) %> on page.ss instead of [email protected] url("stylesheet.css");' on layout.css thinking it would work. I appreciate the description as I spent about 3 solid days trying to figure this out, but learned along the way. Hopefully this works. :-)