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.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

Themes /

Discuss SilverStripe Themes.

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

Custom Fonts


Go to End


2 Posts   2862 Views

Avatar
pinkfloydim

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.

Avatar
Webdoc

Community Member, 349 Posts

25 April 2013 at 7:14am

Edited: 25/04/2013 7:14am

1. Go to http://www.fontsquirrel.com/fonts/Droid-Sans#fontface 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!