Jump to:

1347 Posts in 439 Topics by 514 members

Themes

SilverStripe Forums » Themes » Custom Fonts

Discuss SilverStripe Themes.

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

Page: 1
Go to End
Author Topic: 772 Views
  • pinkfloydim
    Avatar
    Community Member
    5 Posts

    Custom Fonts Link to this post

    @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.

  • Webdoc
    Avatar
    Community Member
    329 Posts

    Re: Custom Fonts Link to this post

    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!

    772 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.