🐿️ Font Squirrel - 25 Popular Fonts + How To Add to A Site [5 Steps]

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.

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.

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.

 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

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. 

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. 

Check out how to do this as YouTube video and how to change the font in any WordPress theme.

25 most popular fonts on Font Squirrel

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

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

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

3. Roboto

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

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

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

5. Lato

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

What is the most popular font right now?

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.

How to use font squirrel?

After you download the font face you want to use, you can upload this to your website and then create the CSS with the font-face as per the instructions above to include this typeface into your website.

About the Author

Author: David AttardWebsite: https://www.linkedin.com/in/dattard/Email: This email address is being protected from spambots. You need JavaScript enabled to view it.

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.