font squirrelIn today's web design, fonts are quite easy to come back unlike the early days of the internet - thanks to sites like Font Squirrel. Whilst before, options were limited to a few fonts which everybody had to make use of, today there are much more choices available because they are no longer limited to the files available on the computer. Fonts can be downloaded on the fly by the user accessing a website and rendered on the fly.

Websites such as FontSquirrel with access to hundreds and thousands of items are very popular - and the webfont generator makes it easier than ever to use 3rd party submissions and creations. 

Today rather than using standard typefaces such as Arial, Calibri and Helvetica neue, because these are the ones which are most available, we can use the CSS @font-face rule, which allows us to use any font, without having to install it on the computer of the visitor.

This has made it extremely easy to add Font Squirrel and any other typefaces your choose to your site.

In this tutorial, we're going to show you how to use FontSquirrel kits on your website. You can use the same concept to add any typeface to your site, including FontAwesome.

 

Add Font Squirrel to your website

Step 1: Find the FontSquirrel font you want add

  • Visit FontSquirrel and click on Find to search for the item you want to add.
  • Have a browse, select the one you would like to use on your website as part of your web design. You can use the various categories to find the typeface you'd like to use, find the most popular, recently added, Hot or trending additions. There are thousands to choose from, so select the one which works best for the project you are working on.

 find fontsquirrel fonts

 

Step 2: Download FontSquirrel WebFont kit

  • Once you have selected the one you want to use, click on the WebFont Kit squirrel button at the top right

 

fontsquirrel download webfont kit

  • Click Download @font-face kit

 

fontsquirrel download font face kit

 

The download will contain a zip file with a number of files, including how to use the web font, any licenses associated with this Font Squirrel typeface, and of course, the actual file itself.

Step 3: Upload the Font Squirrel files to your site 

  • Extract the file - it will be extracted to a folder with the name of the item you chose
  • Upload ALL the files to the CSS folder of your website. You will have a number oof fileswhich you need to upload including. You can also choose the upload the files to a specific folder, let's say TYPES
  1. fontname-webfont.eot,
  2. fontname-webfont.svg,
  3. fontname-webfont.ttf,
  4. fontname-webfont.woff,
  5. stylesheet.css

font squirrel upload files

Step 4: Add the typeface to your CSS stylesheet

The final step will vary a bit according to how fonts are used on your site. Most times you will find your typeface definitions in the CSS file. You should find the CSS file used on your site and add the FontSquirrel files there using the following. Most times the file for the CSS is called stylesheet.css

  • Add the following to your styelsheet, replacing 
@font-face {
    font-family: 'FontName';
    src: url('FontName-webfont..eot');
    src: url('FontName-webfont..eot?#iefix') format('embedded-opentype'),
        url('FontName-webfont.woff') format('woff'),
        url('FontName-webfont.ttf') format('truetype'),
        url('FontName-webfont.svg#FontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

If you've upload the fonts to the TYPES folder, the code will change very slightly to:

@font-face {
    font-family: 'FontName';
    src: url('types/FontName.eot');
    src: url('types/FontName.eot?#iefix') format('embedded-opentype'),
        url('types/FontName-webfont.woff') format('woff'),
        url('types/FontName-webfont.ttf') format('truetype'),
        url('types/FontName-webfont.svg#FontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

Step 5: Change the CSS declarations to use the added FontSquirrel items

Once you have added the above declarations to the stylesheet, you'll need to edit it a little bit more to actually use the typeface in your CSS declarations. After adding the above, you should be able to edit the stylesheet to use the new types you have added. You do this by changing the font-family to the name of the option you have chosen. For example, if you wanted to use the new type with your headers - find the CSS of the header, and then change it accordingly

find the Current font-family

Update the CSS declaration with your FontSquirrel name you have downloaded.

h1,h2,h3,h4,h5,h6 {
    color: #444;
    text-decoration: none;
    font-family: 'FontName', sans-serif;
}

 

Of course, you can use the font-family in whatever CSS tag you need.

If you've followed all of the above steps correctly, once you reload the stylesheet, you should have the new Font Squirrel type you just added to your website!

If not, just bring up chromes developer tools, to check whether all of the files are being accessed properly. This will show as 404 errors.

 

One more thing... Did you know that people who share AWESOME stuff like this post look awesome too? ;-) Share this on your favourite Facebook group who you think would find this useful and let's reap the benefits together!

Featured On

Inc Magazine Logo  

Sitepoint logo  

CSS Tricks logo   

webdesignerdepot logo   WPMU DEV logo   

and many more!

Where are we hosted?

This site is proudly powered by FAST VPS InMotion Servers and given an insane speed thanks to MaxCDN!

Web Hosting MaxCDN - Speed up your website

New! DIVI 3.1 WordPress Template + PageBuilder

You'll surely create a perfect website with Divi 3.1!

Get an exclusive 10% OFF for CollectiveRay visitors until

Divi 3

 

Monstroid2 (Updated!)

The best-selling template from TemplateMonster has been given an awesome upgrade!

We've got an exclusive 10% OFF for CollectiveRay visitors on Monstroid2 until - use Coupon Code: collectiveray

Monstroid2 Super Update

 

TemplateMonster Bundles

Awesome bundles for awesome websites. $1300 worth of products for $49 only!

We've got an exclusive 10% OFF for CollectiveRay visitors until - use Coupon Code: collectiveray

TemplateMonster Bundles

 

The Outstanding HungryJPEG Bundles

AWESOMENESS! Bundles of premium font + graphic packs at more than 96% OFF!  Get a bundle for just $9 - ONLY!

The Hungry JPEG Awesome font bundles

 

Advertise on CollectiveRay.com

CollectiveRay (formerly known as DART Creations) is interested in developing partnerships with mutual benefit. If you like the stuff we publish and would like to develop a relationship, we'd be happy to hear from you. Go on - drop us a line - we'd love to hear from you :-)

 

 

Disclosure: CollectiveRay is funded personally out of pure passion for helping people working with websites. We do however generate some income through recommendations of products. This means if you click on a link and purchase an item we link to, we will receive a small sum out of that sale. We usually partner with vendors to make your purchase cheaper than buying direct.

who are we?

CollectiveRay is run by David Attard - working in and around the web design niche for more than 12 years, we provide actionable tips for people who work with and on websites. We also run DronesBuy.net - a website for drone hobbyists.

David attard

Follow us on Social

Follow us on Facebook   Follow us on Google+   Subscribe to our RSS Feed   Follow us on Twitter