we had the opportunity to take advantage of
and use custom font types for our web applications. Rather than being limited to
default web fonts
we now can use our own font-family and style the web how we like it. With simple inclusion of few CSS parameters the magic happens:
Using FoontSquirrel @font-face kits in YJSG based templates
As you can see above , the process is simple but instead of looking for or creating web font files you can use free service provided by
which will let you download or generate @font-face kits and use them as they are in your YJSG based templates. For demonstration purpose please go to
Pacifico @font-face kit
click on @font-face Kit above the specimen and than click on the big blue button that says Download @font-face Kit.
Since we are using
we will download the zip file to site_root/templates/yjsg_template_name/css/fontfacekits folder. If you are doing this on a live server , download the zip, extract it to its own folder and upload that folder to the path mentioned above. For your convinience YouGrids template is deliveered with PTSansNarrowBold @font-face kit:
Right click on the pacifico-fontfacekit.zip file and extract to its own folder:
Go to your template manager, tab name Style and activate following parameters:
Use Element Tags font override set to Yes
Element tag override type select @font-face kit
From @font-face Kit Font-Family select, choose your newly created @font-face kit folder which in our case is pacifico-fontfacekit
Add custom style declarations
Since @font-face usage sometimes requires you to change font size , font weight or other font attributes , we have disabled Affected selectors param in template admin if you select @font-face kit as your elements tag override, and you should add all your declarations to site_root/templates/yjsg_template_name/css/fontfacekits/your_font_face_kit/stylesheet.css file.
Please make sure that the css file in your @font-face kit folder is always named as stylesheet.css and that you don't have any space in your @font-face kit folder name.
Now open the stylsheet.css file and add this code to change font-family for headings , article title, module title and component name: