The issue with Google fonts - extend a list

October 08 Joomla Templates
GK User
Wed Mar 07, 2012 10:55 pm
Hello.
Because I have a problem with default font (no polish letters) I would like to change it to Open Sans Condensed -Bold 700 from Google web fonts.
How to extend this list of font's on back-end template list to have this possibility?
Regards. Paul
User avatar
Junior Boarder

GK User
Wed Mar 07, 2012 11:28 pm
I've found solution here:
https://www.gavick.com/support/forums/72/11719.html

You can close or remove my posts :).
Btw. gr8 solution with squirell ;)
User avatar
Junior Boarder

GK User
Thu Mar 08, 2012 4:09 am
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/TitilliumText

2. 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.

Image

3. Click on "@font-face Kit"

Image

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

Image

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.

Image

13. Final Results.

Image

See you around...
User avatar
Platinum Boarder

GK User
Thu Mar 08, 2012 11:30 am
WOW :shock:

I'm impressed!!
Thank you for this detailed information.
Regards. Pawka
User avatar
Junior Boarder

GK User
Tue Mar 13, 2012 3:48 am
No problem at all, see you around...
User avatar
Platinum Boarder


cron