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   983 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, 332 Posts

25 April 2013 at 7:14am

Edited: 25/04/2013 7:14am

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]!