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, Ed, biapar, Willr, Ingo, swaiba

Facelift image replacement in SS?

Go to End

14 Posts   4223 Views


Community Member, 41 Posts

3 March 2011 at 1:33pm

I still can't get it going. Here's my worksheet using the default 'Blackcandy' theme. Theme is fresh from SS unzip (no edits/changes). Firefox & Chrome closed and cache reset each time. The font I'm working with is: (IM Fell English) webfont. Am I using the wrong file for style selector changes? Any suggestions where I'm messing it up?

1. Make @font-face kit: (unzip)

2. Make folder: fonts & add fonts from @font-face kit

3. Edit: stylesheet.css to add address.

@font-face {

font-family: 'IMFELLEnglishPRORegular';

src: url('http://www.*****.com/themes/blackcandy/fonts/imfeenrm29c-webfont.eot');
src: url('http://www.*****.com/themes/blackcandy/fonts/imfeenrm29c-webfont.eot?iefix') format('eot'),
url('http://www.*****.com/themes/blackcandy/fonts/imfeenrm29c-webfont.woff') format('woff'),
url('http://www.*****.com/themes/blackcandy/fonts/imfeenrm29c-webfont.ttf') format('truetype'),
url('http://www.*****.com/themes/blackcandy/fonts/imfeenrm29c-webfont.svg#webfont0RamDHmw') format('svg');
font-weight: normal;
font-style: normal;

4. Upload: stylesheet.css to /themes/blackcandy/css/ folder

5. Upload: fonts folder to /themes/blackcandy/ folder

6. Open: /css/
Add: '@import url("stylesheet.css");' at top

ie. /**
* SilverStripe Black Candy Theme
* Main Layout File

/* Misc Styles and defaults
-------------------------------------------- */

'@import url("stylesheet.css");'

* {
margin: 0;
padding: 0;

7. Change (h2), as shown on "Home" on index.php, to 'IMFELLEnglishPRORegular'.
- ie. Open /themes/blackcandy/css/typography.css, edit

.typography h2 {
color: #4EA3D7;
margin: 0 0 18px 0;
font-weight: 300;
font-family: 'IMFELLEnglishPRORegular', Verdana, sans-serif;


Community Member, 18 Posts

4 March 2011 at 4:34am

Hmmm, assuming a typo in your step 6 ( instead of layout.css) the only real difference I can see is that you're pointing to the fonts using a full URL and I had used a relative path ('../fonts') . Try changing that and see if it makes any difference.


Community Member, 107 Posts

10 March 2011 at 8:39am

The only down side I am seeing is, to get it to work with all formating (Bold, Underline, etc.) you have to style each member. Unless there is a way to make it more generic:

.typography h1,
.typography h2 {
color: #4EA3D7;
margin: 0 0 18px 0;
font-weight: 300;
font-family: SFCartoonistHandRegular, SFCartoonistHandItalic, SFCartoonistHandBold, SFCartoonistHandBoldItalic, SFCartoonistHandSCRegular, SFCartoonistHandSCItalic, SFCartoonistHandSCBold, SFCartoonistHandSCBoldItalic;

Didn't seem to work when I used "bold".


Community Member, 7 Posts

8 July 2011 at 6:16am

Thanks for the help! I am trying to do this also. Just to clarify your second step, do you write the url:.../font/etc; in the style sheet as font-family class?


Community Member, 49 Posts

9 July 2011 at 11:09pm

dunno if this helps in what your after, but if you dont mind calling a google file in your header then its certainly worth a look at for font relacement, i tried it just the once on a dev example for a client (i will be putting in production this week) and i didnt notice any rendering issues with the font families used, i´ve used sifr before and cufon and have noticed delays with the lay over effect being applied, using the google fonts i have not had this,

downside is that there aint a really wide choice of font just yet, but there should be a style close to what your looking for.

upside is that google web fonts is easy, and uses minimum code.


Community Member, 7 Posts

10 July 2011 at 2:05pm

Edited: 10/07/2011 2:35pm

I have used google fonts before and loved them- but working in a CMS, I dont know how to insert the code in the header. Do you insert it in the file? Thanks. I inserted the code they instructed me to into the header, but it came up with errors.

Go to Top