Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Facelift image replacement in SS?

Go to End

14 Posts   3268 Views


20 February 2011 at 9:34am Community Member, 17 Posts

I've used the the Facelift Image Replacement [] 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.

Thanks for any help.


21 February 2011 at 12:27am Community Member, 17 Posts

Just an update.

I stumbled upon the Font Squirrel website [], 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!



23 February 2011 at 9:40pm Community Member, 61 Posts

Another font replacement technique you could use is cufon : you just add a few js tags and it works well with SS.


24 February 2011 at 2:38am Community Member, 17 Posts

Thank you, stallain! I'll check it out!


24 February 2011 at 4:48am Community Member, 17 Posts

After a bit of playing around I got cufon working. The results are very satisfactory. Thanks again stallain!


2 March 2011 at 12:42pm Community Member, 41 Posts

I've been trying to get font-face working on default SS blackcandy for the past few days without success. I must be missing something. Any simple instructions to help me along?


3 March 2011 at 12:08am Community Member, 17 Posts

Here's what I did:

First I downloaded a font-face kit from Font Squirrel []. 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 '@import 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.


3 March 2011 at 12:45am Community Member, 41 Posts

Thanks VanceK!

I think I used <% require themedCSS(stylesheet) %> on instead of '@import 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. :-)

Go to Top