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.

Read More: How to Learn CSS (Smashing Magazine)

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.


About the Author
David Attard
Author: David AttardWebsite:
David has been working in or around the online / digital industry for the last 18 years. He has vast experience in the software and web design industries using WordPress, Joomla and niches surrounding them. As a digital consultant, his focus is on helping businesses get a competitive advantage using a combination of their website and digital platforms available today.

One more thing... Did you know that people who share useful stuff like this post look AWESOME too? ;-)
Please leave a useful comment with your thoughts, then share this on your Facebook group(s) who would find this useful and let's reap the benefits together. Thank you for sharing and being nice!

Disclosure: This page may contain links to external sites for products which we love and wholeheartedly recommend. If you buy products we suggest, we may earn a referral fee. Such fees do not influence our recommendations and we do not accept payments for positive reviews.

Featured On

Inc Magazine Logo  

Sitepoint logo  

CSS Tricks logo   

webdesignerdepot logo   WPMU DEV logo   

and many more!



Get Started Now With ShutterstockShutterstock

Best Rated Caching Plugin

Make your website faster 

How to make your website FAST!

Step-by-step - free email course, how to make your website load in less than 1 second  

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 - a website for drone hobbyists.

David attard