Add Fonts to Your Site With FontSquirrel

font-squirrel

In the early days of the web, the number of fonts in websites was limited. This was due to the font files that were installed in the visitor’s computer.

The most famous fonts are Arial, Helvetica and Calibri because Windows and Macs often included only those fonts by default.

Now, with the @font-face rule in CSS, we can load any desired font-family without install anything in the user’s computer.

This feature makes it possible to load font files that work for almost any user. FontSquirrel is a free service that makes this process easier with its Web Font Generator tool.

In this tutorial, we’ll show you how to use FontSquirrel and add more fonts to your site.

Step 1. Find a font

fontsquirrel 1
  • Browse the fonts and find one you that you’d like to use.
fontsquirrel 2
  • Click on Webfont Kit
  • Click Download @font-face Kit.
fontsquirrel 3
  • The zipped folder you’ll receive will include these files:
fontsquirrel 4

Step 2. Upload the font files to your site

  • Extract the web fonts folder that you downloaded and open the “yourfontname” folder.
  • Copy the font and CSS files into the CSS folder of your own website. The files will look like the image below and will have names like these: yourfontname-webfont.eot, yourfontname-webfont.svg, yourfontname-webfont.ttf, yourfontname-webfont.woff, stylesheet.css
fontsquirrel 5

Step 3. Add the font to your CSS

The final step will depend on the type of site you have.

  • With static websites, open your HTML file (for example, the index.html file) with your code editor and place this code just inside the head tag:

<link rel=”stylesheet” href=”/path/to/css/stylesheet.css” type=”text/css” charset=”utf-8″ />

  • Open stylesheet.css with your code editor and add your font-family name as in this example:

body{
font-family: ‘yourfont-family’;
}

Using the body tag to assign the font-family to your site will work if you don’t have another font-family assigned to other tags or CSS classes.

If you do already have anothe font-family, you can use other tags like p, div, .custom-class instead of just body.

If everything was added correctly, you will have a new font working in your website.

Author

  • Valentin Garcia

    Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

    View all posts
0 0 votes
Article Rating
Subscribe
Notify of
guest

4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Steven Johnson
10 years ago

Cool service, had not heard of this one before.
What would you say is the advantage of this over Google Fonts?
Thanks! — Steven

htmgarcia
10 years ago
Reply to  Steven

Hi Intown Web Design,

Google fonts is easier to integrate buth you always depends on Google; in the other hand with FontSquirrel you will have a copy of the files on your own website to work even offline. Very important for new technologies like Open web apps in smartphones that sometimes doesn’t require for an internet connection.
Regards

Eddie Rosenthal
Eddie Rosenthal
10 years ago

i have tried several different ways to get the font ‘calligraffiti’ to work on a site, so that both mac os’s ipads and pc’s can see that type face. Using fontsquirrel technique did not work for the pc, on the mac it did, but only because mac’s probably have the font on their machine, which this font-face rule should avoid. I also tried it with a program to create the file formats ( transtype4 by fontlab) and that also failed, similarly. i can see the font on the ipad fine, but not on my pc browsers ( ie, safari, ff, chrome). they see the fontstack and chose cursive. seeing that the ipad and macs can view the font correctly validates the font files were in the correct locations, and i used the css from either of those methods correctly. i didn’t link to the stylesheet given, just copied and pasted the css into style.css, then set up the classes to use the font. In any case i was very disappointed. I can understand why there are some glitches in this method, as font face is fairly new, but the browsers used were the latest versions. Even IE has a good reputation for using this rule, as Microsoft invented it more than 15 years ago. Even though i never give up, i am puzzled about how to proceed. The only thing i can think of to satisfy the client is to create graphics for the areas where the font should show up, but of course am reluctant to do that for a lot of different reasons…

Patriciq
Patriciq
5 years ago

Thank you. U r the best. I was struggling but just one word from this post changed everything. 

4
0
Would love your thoughts, please comment.x
()
x