How to add Font Squirrel Fonts and Types to Your Website in 5 Easy Steps

font squirrel

Thanks to sites like Font Squirrel, you can use any type or style of font you like on a website. Options used to be limited to a few standard web fonts which everybody had to make use of. Today there are many more choices available. You are no longer restricted to a few web-compatible fonts. Now, fonts can be downloaded on the fly simply through accessing a website.

Websites such as Font Squirrel, with access to hundreds and thousands of items are very popular. It’s web font generator makes it easier than ever to use third party submissions as well as curated creations.

 

Contents[Show]

Rather than using standard typefaces such as Arial, Calibri, and Helvetica Neue, we can use the CSS @font-face rule. This allows us to use any font without having to install it on visitor’s devices. This is an excellent option that provides the freedom of expression for the website designer and maximum usability for the user.

Read More:How to Learn CSS (Smashing Magazine)

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

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

Add Font Squirrel to your website

1. Find the FontSquirrel font you want

  • Visit Font Squirrel and select Find to search for the font you want to add.
  • 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. Select the one which works best for the project you are working on.

 find fontsquirrel fonts

 

2. Download Font Squirrel WebFont kit

  • Once you have selected the font you want to use, click on the WebFont Kit button at the top right of the screen.
  • Click Download @font-face kit.

fontsquirrel download webfont 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 file itself.

 

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 of files which you need to upload including:
  1. fontname-webfont.eot,
  2. fontname-webfont.svg,
  3. fontname-webfont.ttf,
  4. fontname-webfont.woff,
  5. stylesheet.css

 

font squirrel upload files

 

4. Add the typeface to your CSS stylesheet

The final step will vary a bit according to how fonts are used on your site. You will find your typeface definitions in the CSS file. The file should be called stylesheet.css. You should find the CSS file used on your site and add the Font Squirrel files there using the following. Add the following to your stylesheet.css file, 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 uploaded 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;
}

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. After adding the above code, you need to further edit the stylesheet to use the new types you have added.

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 the 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 font you just added to your website!

If not, just bring up your browser’s developer tools to check whether all of the files are being accessed properly. If not, recheck your CSS to make sure you spelled the font name correctly.

 

If you’re looking for inspiration for a font to use, here are the 25 hottest fonts on Font Squirrel right now.

Montserrat

1. Montserrat

Montserrat is a modern urban font available in multiple weights. It works up close and at a distance and could work well on the web.

https://www.fontsquirrel.com/fonts/montserrat

Open Sans

2. Open Sans

Open Sans should need no introduction. It is one of the most popular fonts in the world and is clean, modern and flexible.

https://www.fontsquirrel.com/fonts/open-sans

Roboto

3. Roboto

Roboto is another immensely popular web font thanks to its clean lines, unfussy appearance and flexibility.

https://www.fontsquirrel.com/fonts/roboto

Raleway

4. Raleway

Raleway is similar in appearance to Roboto but is also unique. Another clean and light font that would work well in any situation.

https://www.fontsquirrel.com/fonts/raleway

Lato

5. Lato

Lato has been around almost 10 years thanks to its effectiveness, modern appearance, and great balance.

https://www.fontsquirrel.com/fonts/lato

Bebas Neue

6. Bebas Neue

Bebas Neue is an interpretation of the original Bebas Neue free font by Ryoichi Tsunekawa. It’s a very attractive font that is immensely popular.

https://www.fontsquirrel.com/fonts/bebas-neue

Poppins

7. Poppins

Poppins is a light and carefree font with great balance. It is thoroughly modern too, meaning it could work in many designs.

https://www.fontsquirrel.com/fonts/poppins

Great Vibes

8. Great Vibes

Great Vibes is a flowing handwriting-style font that is still legible on different screen sizes. This lends itself well to being used on upmarket designs.

https://www.fontsquirrel.com/fonts/great-vibes

Alex Brush

9. Alex Brush

Alex Brush is another flowing handwritten brush script that is legible on different screen sizes. It is a more relaxed take on the theme with definite appeal.

https://www.fontsquirrel.com/fonts/alex-brush

Quicksand

10. Quicksand

Quicksand is light and capricious and has an airy feel about it. A mixture of modern and whimsical, the font could be ideal in a range of web designs.

https://www.fontsquirrel.com/fonts/quicksand

Oswald

11. Oswald

Oswald is a heavier, more emphatic font that has great legibility at different distances. It is also unfussy and modern which works well.

https://www.fontsquirrel.com/fonts/oswald

Source Sans Pro

12. Source Sans Pro

Source Sans Pro is an evolution of one of Adobe’s first open source fonts. It has been modified and enhanced steadily, with this being one of the best examples.

https://www.fontsquirrel.com/fonts/source-sans-pro

Playfair Display

13. Playfair Display

Playfair Display is a more traditional font with a modern twist. It is well balanced and could work in all kinds of situations.

https://www.fontsquirrel.com/fonts/playfair-display

Milkshake

14. Milkshake

Milkshake is a heavier font with an American theme. It was initially sketched with a brush before turned into a font.

https://www.fontsquirrel.com/fonts/milkshake

Kaushan Script

15. Kaushan Script

Kaushan Script has an Asian element that conjures visions of Saigon in the 1930s. It’s a nice font with wide appeal.

https://www.fontsquirrel.com/fonts/kaushan-script

Chunkfive

16. Chunkfive

Chunkfive is a descriptive name for this chunky font. It is a bold font that makes an impact and could work well for headlines or headings.

https://www.fontsquirrel.com/fonts/chunkfive

Amatic

17. Amatic

Amatic is reminiscent of chalkboard writing or The Simpsons yet has a character all of its own. It could work well on less formal websites.

https://www.fontsquirrel.com/fonts/amatic

Allura

18. Allura

Allura is another flowing handwritten font that is very pleasing to the eye. Careful consideration could make great use of this font.

https://www.fontsquirrel.com/fonts/allura

League Spartan

19. League Spartan

League Spartan is a no-nonsense font that has a lot of presence. It could work perfectly as a headline or within a call to action.

https://www.fontsquirrel.com/fonts/league-spartan

Metropolis

20. Metropolis

Metropolis is a modern geometric font that has obviously been influenced by some of the more popular fonts. This is a great interpretation.

https://www.fontsquirrel.com/fonts/metropolis

Pacifico

21. Pacifico

Pacifico is a light-hearted flowing font that conjures thoughts of Pepe jeans and 1960s America. It’s an effective font in a heritage setting.

https://www.fontsquirrel.com/fonts/pacifico

Aller

22. Aller

Aller is a clean, light and modern design whose angular appearance lends itself well to modern web design.

https://www.fontsquirrel.com/fonts/Aller

Josefin Sans

23. Josefin Sans

Josefin Sans manages to combine modernity with heritage and could be a very flexible font in a huge range of designs.

https://www.fontsquirrel.com/fonts/josefin-sans

Black Jack

24. Black Jack

Black Jack is a flowing font with an informal appearance. It could work well in laid back, comedic or relaxed designs.

https://www.fontsquirrel.com/fonts/blackjack

Lobster

25. Lobster

Lobster has the appearance of a brand, perhaps New England or somewhere by the sea. A great font to use if the design suits.

https://www.fontsquirrel.com/fonts/Lobster

Frequently Asked Questions

What is Font Squirrel?

Font Squirrel is a repository of web fonts sourced from free and open source creators. All fonts can be downloaded and used for free, even commercially.

How do I download web fonts from Font Squirrel?

Downloading web fonts from Font Squirrel is easy. Identify the font you want to use, download the file containing the font. Upload the files to your web host and include the font name in your stylesheet.css. Then test to make sure your font loads.

The most popular font right now is Helvetica. According to Wired, Helvetica is the most popular font in the world despite being 62 years old.

What is the most trendy font to use?

Aside from Helvetica, the most trendy fonts to use according to Lifehack include Baskerville, Times, Akzidenz Grotesk, Gotham, Bodoni and Didot.

 

 

About the Author
David Attard
Author: David AttardWebsite:https://www.linkedin.com/in/dattard/
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.

Author(s) Featured On:  Inc Magazine Logo   Sitepoint logo   CSS Tricks logo    webdesignerdepot logo   WPMU DEV logo   and many more ...