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:
- fontname-webfont.eot,
- fontname-webfont.svg,
- fontname-webfont.ttf,
- fontname-webfont.woff,
- 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.
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.
and many more ...