For using Font Squirell here is a more extended tutorial.
For adding Squirrel fonts please follow below steps.
1. Browse to
http://www.fontsquirrel.com to get a font kit. For this example i will be using TitilliumText font. Link is
http://www.fontsquirrel.com/fonts/TitilliumText2. This font has following styles. This is important as we can't load all styles at once as we cannot make a selection via template settings. So we will need to delete all but one and use that one in our template & example.

3. Click on "@font-face Kit"

4. Click on "Download@font-face Kit"

5. Save the file in your computer.
6. Extract the contents of the file. In our example i have a folder called "TitilliumText-fontfacekit".
7. Rename the folder "TitilliumText" getting rid of "-fontfacekit".
8. Find "stylesheet.css" inside the folder and open it with your favorite editor.
9. You will see codes similar to below. As our style had 6 different styles there are 6 blocks of similar codes inside this css file. So we will be only using one of these styles as described in Step 2. So please delete rest of the css blocks. So my stylesheet.css ends up as below. Save and close the file.
- Code: Select all
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on February 25, 2012 03:42:46 AM America/New_York */
@font-face {
font-family: 'TitilliumText';
src: url('TitilliumText22L005-webfont.eot');
src: url('TitilliumText22L005-webfont.eot?#iefix') format('embedded-opentype'),
url('TitilliumText22L005-webfont.woff') format('woff'),
url('TitilliumText22L005-webfont.ttf') format('truetype'),
url('TitilliumText22L005-webfont.svg#TitilliumText22LBold') format('svg');
font-weight: normal;
font-style: normal;
}
10. So my selected style uses "TitilliumText22L005" named files in this folder. So i delete the rest and only keep following files.
- Code: Select all
demo.html
SIL Open Font License 1.1.txt
stylesheet.css
TitilliumText22L005-webfont.eot
TitilliumText22L005-webfont.svg
TitilliumText22L005-webfont.ttf
TitilliumText22L005-webfont.woff
11. Now our folder is ready to be copied to our template folder.
So copy "\TitilliumText\" folder in to "\templates\gk_penguinmail\fonts\" so final result is "\templates\gk_penguinmail\fonts\TitilliumText"
12. Now our font is ready to be selected from template settings > Fonts tab.

13. Final Results.

See you around...