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, simon_w

Custom Fonts


Reply

2 Posts   953 Views

Avatar
pinkfloydim

25 April 2013 at 4:24am (Last edited: 25 April 2013 5:53am), Community Member, 5 Posts

@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

25 April 2013 at 7:14am (Last edited: 25 April 2013 7:14am), Community Member, 332 Posts

1. Go to [url]http://www.fontsquirrel.com/fonts/Droid-Sans#fontface[/url] 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 [url=http://www.arvixe.com/preloaded_silverstripe_hosting/]SilverStripe Web Hosting[/url]? Look no further than [url=http://www.arvixe.com/]Arvixe Web Hosting[/url]!