Using Custom Fonts/Typefaces in Silverstripe

Once there was a time when you were limited to Arial, Times or Courier in your website. Now you can use pretty much any font you like to complement your website.

However, it's not just as simple as choosing your font from a drop down list. And, like anything else, there are many ways of achieving the same end results - some are complicated (so we'll ignore those), some are ease. Below, I'll describe the easiest! It's know as the @font-face method, as this is the command you put in you CSS stylesheet. It uses no plugins, no javascript, and work in any modern browser - including IE6.

Let's visit the Font Squirrel

Our friend here is http://www.fontsquirrel.com. This a superb website. You can download great selection of handpicked, quality fonts, ready to use in you website. You can also upload a font to the @font-face generate, and make your own set of files for your on your website.

Download an @Font-Face Kit

• Visit this page http://www.fontsquirrel.com/fontface
• Look down through the options on this page
• Find the font you want to use, and click 'Get Kit'

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 varations, 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.

Our CSS file (and therefore our web page) is now loading the font files. Now, we just have to say where to apply this font. It takes a short while for your browser to download, open, and apply fonts to your page. So don't use them everywhere. It's general best to use a standard font for your main text, and have a nice unique one for your titles. 

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

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