Add Fonts to Your Site With FontSquirrel

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

• Go to FontSquirrel >> Find Fonts

• Browse the fonts and find one you that you’d like to use.

• Click on Webfont Kit
• Click Download @font-face Kit.

• The zipped folder you’ll receive will include these files:

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

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.