Avatar arjun.khara asked

Here's how to install fonts from Font Squirrel - Step by Step

Hi All
I was searching for set of instructions on how to install fonts from webfont kits like Font Squirrel. I found lots of great information but not all together in one place. The information was on different pages and different sites. So I've done this small writeup to show how I installed a font from Font Squirrel to my Joomla 2.5 site that's using the Cloud Theme (warp 6.1.10). I've listed instructions in step by step format. There are 23 steps in total, because I listed every little bit of action to avoid any confusion. Many steps will only take a few seconds to do.

Here goes:

Step 1:
Go to Font Squirrel, click on @font-face Kits and find the font you like. I chose and downloaded the font named Cabin.

Step 2:
Once you've downloaded the web font kit, you will have a zipped file that is titled: cabin-fontfacekit.zip

Step 3:
Unzip this file and you get a folder titled: cabin-fontfacekit

Step 4:
Open the folder and locate the 4 files that have the extensions:
.eot
.svg
.ttf
.woff

Step 5:
Fire up your FTP program and connect to your site. (I use Transmit for my FTP, and I love it).

Step 6:
Go to: templates/yoo_cloud/fonts (If you use another theme like Subway, then replace yoo_cloud with yoo_subway)

Step 7:
Copy these 4 files from Step 4 into the fonts folder.

Step 8:
Don't leave the fonts folder just yet. Create a new file and name it cabin.css

Step 9:
In your cabin-fontfacekit folder, that's on your computer, open the file stylesheet.css, and copy the entire code.

Step 10:
Back to your FTP, open cabin.css and paste the entire code that you copied in Step 9. Save it and close it.

Step 11:
Go to: templates/yoo_cloud/layouts/template.config.php and open this file for editing.
(Please be very careful at this stage because all the code in template.config.php is critical for your site to work. Take extra care when typing code into this file and do not delete anything. If you do, close the file without saving and then re-open it.)

Step 12:
In template.config.php, scroll to line 89 (or there about) till you see the line: //load fonts

Step 13:
Insert this line of code directly below //load fonts:
$this['asset']->addFile('css', 'template:fonts/cabin.css');
(Replace cabin.css with the name of your font, like arial.css or verdana.css)

Step 14:
Save it and close it. That takes care of template.config.php

Step 15:
Go to: templates/yoo_cloud and open the file config.xml

Step 16:
In config.xml, scroll to line 57 (or there about) till you see the line: <field name="font1" type="list" default="default" label="Body Font" description="Select the main body typeface.">

Step 17:
Under the line of code mentioned in Step 16, you will see the following block of code:
<option value="arial">Arial</option>
<option value="lucida">Lucida</option>
<option value="georgia">Georgia</option>
<option value="timesnewroman">Times New Roman</option>
<option value="trebuchet">Trebuchet</option>
<option value="droidsans">Droid Sans</option>
<option value="mavenpro">Maven Pro</option>
<option value="ubuntu">Ubuntu</option>
<option value="metrophobic">Metrophobic</option>

Step 18:
Add this line to the block (below or above doesn't matter as long as it is part of the block):
<option value="cabin">Cabin</option>

Your code block now looks like this:

<option value="arial">Arial</option>
<option value="lucida">Lucida</option>
<option value="georgia">Georgia</option>
<option value="timesnewroman">Times New Roman</option>
<option value="trebuchet">Trebuchet</option>
<option value="droidsans">Droid Sans</option>
<option value="mavenpro">Maven Pro</option>
<option value="ubuntu">Ubuntu</option>
<option value="metrophobic">Metrophobic</option>
<option value="cabin">Cabin</option>

Step 19:
Save it and close it. That takes care of config.xml

Step 20:
Finally, go to: templates/yoo_cloud/css/font1 and open the font1 folder. (font1 is the body font folder)

Step 21:
Create a new css file and name it cabin.css. (Make sure this cabin.css file is contained inside the font1 folder)

Step 22:
Open cabin.css and type in this code:
body {font-family: "CabinRegular";}

Step 23:
Save it and close it. That takes care of everything.

Now go to your Joomla! Administrator site > go to Extensions > go to Template Manager > click on yoo_cloud > click on Profiles > choose your font from the drop-down menu for the Body Font options. You will see Cabin listed as one of the fonts. If in Step 17 you placed your <option> code at the top of the block of code, then Cabin will appear at the top of the drop-down list. if you placed your <option> code at the bottom of the block of code, then Cabin will appear at the bottom of the drop-down list.

Final word: I created this set of instructions in a way that I would like it explained to me. Every action taken is a step. Some steps are extremely fast, like 'Save and Close'. The entire process should take about 7 minutes if you are new and very, very careful. I hope this helps anyone looking for a complete solution to installing web fonts on their sites. As always, please respect the EULAs of every font. Yoo Theme rocks!

  • Joomla
  • General Question

Edited

7 Answers

1

Avatar brian.punger answered

Will this work for Menu Fonts and Header Fonts?

1

Avatar arjun.khara answered

Hi Brian

Yes, as far as I've tried it does work for both Menu Fonts and Header Fonts.

But you have to make the changes described in the primary write-up (above) within the correct folders.

Font1 Folder is the body font folder.

Font2 Folder is the header font folder.

Font3 Folder is the menu font folder.

Apologies if I've got Font2 and Font3 mixed up.

But either way, as long as you do the installation in the correct folder it should work great, as it did for me when I tried.

Good luck.

Regards
Arjun

0

Avatar rocio.santillana answered

Just an update to this at least for the Wordpress version. Steps 15 - 23 you do not need to do, instead just go to your config.json file and call your font there (just copy and paste one of the fonts and replace with your info). That's it, you will then see your font in the Customizer.

Summary: Add your font files to the "fonts" folder (Steps 4-7) then add your font stylesheet (you can add it anywhere as long as your path is correct in that css file. I just added the css file in to my css folder and updated that file with the url path to the fonts folder ). Link your template.config.php to that css file. Then open your config.json file and copy and paste a line and add your font name (as you want it to be used in your css) and you are done!

0

Avatar vasco.neves answered

Kolopaidi:
"all this to change the font? why dont use from the beginning a utf-8 webfont?!?!?!"

Could you please explain?

Thanks,
Vasco

-4

Avatar kolopaidi answered

all this to change the font? why dont use from the beginning a utf-8 webfont?!?!?!

Know someone who can answer? Share a link to this question via email or twitter.