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

Custom Fonts


Go to End
Reply


2 Posts   1566 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, 341 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!