Using Custom Web Fonts in Silverstripe

Setting up customer web fonts in SilverStripe is very easy!

1. Go to http://www.fontsquirrel.com

2. Find the desired font you want to use, and click ‘Get Kit’

3. Load the Font to Using CSS. When you open the ZIP file, you’ll see not just one font – but a collection of files. The EOT, SVG, TTF and WOFF files are all font file, but in different formats for different browsers. There will be 4 fonts for each font variation. Eg, if the font you choose has Normal, Bold, Italic, and Bold Italic variations, there will be 12 files.

  • Copy all the EOT, SVG, TTF and WOFF. Paste them into the CSS folder in your current theme in to your silverstripe site. Eg mysite.com/themes/myFontTheme/css/
  • In the ZIP file you download, open the stylesheet.css file (in notepad, or dreamweaver, whatever you use for editing CSS files)
  • Open the typography.css file in your current silverstripe theme. Eg mysite.com/themes/myFontTheme/css/typography.css.
  • There will be one @font-face { } block for each font variation.
  • Copy all the CSS content from stylesheet.css and paste at the top of your typography.css file.

4. Apply the font. Let’s say we use font named ‘AngelinaRegular’ for heading 1 use code:

.typography h1 {
	font-family: 'AngelinaRegular', Verdana, sans-serif;
	font-size: 24px;
	color: #4c7aa5; 
	margin: 0 0 18px 0;
}

Looking for quality SilverStripe Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , | Posted under SilverStripe CMS | RSS 2.0

Author Spotlight

Teet Bergmann

Teet Bergmann

I'm a freelance web designer from Estonia. Mostly doing sites using Silverstripe, magento, prestashop, wordpress.

Leave a Reply

Your email address will not be published. Required fields are marked *


− 5 = 2

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>