According to last templates update which are based on T3 framework, except some changes connected with adding fonts, extending the list of Google Fonts, we have prepared a new functionality, namely support for Font Squirrel. I would like to describe it in short how it works and which allows enrich typography of our site very easily.
At Font Squirrel website, you can find ready sets with fonts. As you can see, the choice is really huge. Configuration with these fonts itself is quite easy.
Firstly, we are loading a set of files chosen (“Get Kit”), unpacking it and sending unpacked catalog to fonts/ catalog of our template.
Next, in template’s options we are setting “Font style” option to “Squirrel font”.
Now, depending on group of fonts we want to change, we are choosing “Font Squirrel font name” parameter for a group of fonts specified, e.g. “base” and we are entering a font name which we can find in stylesheet.css file loaded set of files.
For example, for Cloister Black font which stylesheet.css file looks as follows:
@font-face { font-family: 'CloisterBlackLight'; src: url('CloisterBlack-webfont.eot'); src: local('☺'), url('CloisterBlack-webfont.woff') format('woff'), url('CloisterBlack-webfont.ttf') format('truetype'), url('CloisterBlack-webfont.svg#webfontrwSM9VT7') format('svg'); font-weight: normal; font-style: normal; }
the name of the font is CloisterBlackLight.
All we have to do, is to set the name of a catalog with font – option “Font Squirrel font directory” for the same group of fonts for which we specified a font name and after that we can see our new font at our site.