@Font-face Kit Generator for Hosted Fonts on Your Website

Adding custom fonts to a website is becoming more customary in website design.  The unique fonts add a nice customized flare to the theme of the site and hosting a font allows the customized text to still be parsed by search engines instead of being an image.

One drawback of hosting a font is that different operating systems and browsers look for different font file types.  The four standard file types are:

  • .eot
  • .svg
  • .ttf
  • .woff

Typically the custom font is provided in one file type leaving the designer responsible for generating the other file types and creating the necessary @font-face CSS code for the hosted font to work across different browsers.

Font Squirrel provides a quick and useful tool to generate a font kit that includes the necessary files and CCS code to host a font.  To create a font kit, go to the Font Squirrel @font-face Generator page, http://www.fontsquirrel.com/fontface/generator, and follow the instructions.  The resulting .zip file will contain the different font files plus the @font-face CSS code required to declare the font for the site. Upload the font files, add the CSS code and set the correct path to the files in the @font-face declaration and you are ready to use your custom font.

Happy customizing ;)

About Charlie Thompson

Charlie is co-founder and president of GroundSwell Web Designs. When he's not evaluating tools, building sites, assisting clients, or verbally threatening computers you can usually find him outside wondering what that big bright object is in the sky. You can follow him on Linkedin. See all posts by Charlie.