Using Font Squirrel on your website.


To very easily use Font Squirrel with your website, you will either need to use it with Joe’s Letterpress stack or with Foundation for Rapidweaver. You can add it without these, but it takes a little more work and the instructions below are very easy to do.

First, you need to go to the FontSquirrel website and choose the font you want to use.

FontSquirrel Website

Make sure you only use one that is suitable for web use.

FontSquirrel Font Types

These are ones that have the globe icon that is dark black and not a white or gray color. You will also want to be sure to use a font that uses the @font-face kit. To find out if your font has that, click on the font and go to Webfont Kit tab. If your font supports a @font-face kit, you will see a blue Download @Font-Face Kit button.

FontSquirrel Wefont Kit

If your font does not have this, you will have to choose a different font. Some of the fonts on FontSquirrel you will need to purchase to get this kit.

Once you download the kit, find the folder and put it on the root of your server where your website will be hosted. You want to be sure you are using the folder that has the web fonts in it, some font folders will have more than one font in them (bold, italic etc.) so make sure you put the correct folder in. The folder contents should like something similar to this:

Web Font Folder Contents

Then you will want to put this code

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

into your global settings in RapidWeaver.

RapidWeaver Global Setting

Now you will need to add something to this piece of code, right after the href=” you will want to add a link to your folder that you put on your server earlier. When done it should look something like this:

<link rel="stylesheet" href="http://www.your-web-url.com/folder-name-on-server/stylesheet.css" type="text/css" charset="utf-8" />

Where your-web-url is the URL of your website and the folder-name-on-server is the name of the folder with the font files in it. In the example above, the folder name would be 3dumb_regular_macroman.

RapidWeaver Global Setting

The next thing you need to find out is the Font Family name of the font. Now, for some reason FontSquirrel does not put that on the website at all, at least we can not find it on there anywhere. There is an easy way to find it, you should still have the downloaded fonts on your computer (in fact we suggest you put those files in the folder where you keep the RapidWeaver file and other files for the website). In that folder there is a file called stylesheet.css

Web Font Folder Contents

You will want to open that with Text Wrangler, Submlime Text or something similar. When you do, you will see something similar to this:

stylesheet.css file

on the second line of this file you should see the font-family code, it is the one listed in between the single quotes. In the screenshot above it is 3dumbregular. You will want to copy that down or put it in the clipboard of your computer (Cmd-C).

Choose the way to use the font

Once you have that done, it all depends how you are going to use the font.

Foundation for RapidWeaver

If you are using Foundation for Rapidweaver you will want to go into the Site Styles stack, and find the Foundation - Text setting. Choose the font size you want to use this font, click on Custom Definition choice from the dropdown menu and a box will appear for Custom Font.

Foundation Text Settings

Put in your Font Family name you got from above into this box and preview the page.

Preview of Foundation Page

Letterpress

If you are using Letterpress, go to the Letterpress - Advanced settings and look for the Style setting, change it from Theme Font to Custom Definition. Then put in the Font Family name into the box that pops up.

Letterpress Settings

Once you are done, type the text you want to appear in the Letterpress stack and preview the page.

Letterpress Preview

Now your site is ready to use fonts from FontSquirrel website

No go forth and make your websites great!