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.

Themes /

Discuss SilverStripe Themes.

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

Custom Fonts

Go to End

2 Posts   2705 Views


Community Member, 5 Posts

25 April 2013 at 4:24am

Edited: 25/04/2013 5:53am

@font-face {	
    font-family: 'Droid Sans', sans-serif;
    font-weight: normal;
@font-face {
    font-family: 'Droid Sans', sans-serif;
    src: url('trebuc.ttf');
    font-weight: normal;

I have placed the font in the css directory, as per a tutorial I read.

But when I run the site, the font is not loaded. Also seems to get crossed out in the css when using firefox debugger.

So if I disable this, then it will not load this custom font.

Any idea how to fix this?

I have tested some other fonts, and they all work.

This font is being used on a normal html website, but just won't load using the above code.


Community Member, 349 Posts

25 April 2013 at 7:14am

Edited: 25/04/2013 7:14am

1. Go to and download the webfont
2. Upload the font files: DroidSans-webfont.eot, DroidSans-webfont.svg, DroidSans-webfont.ttf, DroidSans-webfont.woff to your theme css folder.
3. Add Font-face to css like so:

@font-face {
    font-family: 'DroidSansRegular';
    src: url('DroidSans-webfont.eot');
    src: url('DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
         url('DroidSans-webfont.woff') format('woff'),
         url('DroidSans-webfont.ttf') format('truetype'),
         url('DroidSans-webfont.svg#DroidSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;


4. In places you wanna use the font add line:
font-family:'DroidSansRegular' , sans-serif;

Arvixe Web Hosting / SilverStripe Community Liaison | Looking for quality SilverStripe Web Hosting? Look no further than Arvixe Web Hosting!