Create @font-face custom fonts for a website

Font Squirrel is a great online service, where you can download free fonts, @font-face kits and make your own kits with the @font-face kit generator.

Sometimes when you create a website, you want to add a custom typography instead of browser supported fonts. You can do that with a @font-face CSS method. In order for this fonts to work in all major web browsers, you need a so called web font kit, let's see how to create these font kits using Font Squirrel @font-face generator.

Open www.fontsquirrel.com in your web browser.

You can browse for thousands of free fonts, download already prepared @font-face kits or create your own @font-face and that's what we are going to do now, presuming you already have a font. If not download one.

Click @font-face Generator.

Choose Optimal conversion and select Yes, the fonts i'm uploading are legally eligible for web embedding.

Click Add Fonts.

Now choose the font you have stored on your computer and you want to create a @font-face kit for.

If the conversion went well, a Download Your Kit button appears, click it and save the @font-face kit to your computer.

Find the .zip file you just downloaded and extract it into a folder.

Now you have all the type of fonts (.eot, .svg, .ttf, .woff), so there shouldn't be any problem with web browser support.

You can also click the html document ...

... and see how your fonts looks like in "wild".

That's it, now click here if you want to learn how to put this non-web font on a Wordpress Website.