Find Fonts for Web Design Online - dummies

Find Fonts for Web Design Online

Although you can upload any font you have to your own server and link to it, an online font repository offers many advantages, the font is stored on the repository’s servers and it provides the CSS to include the font in your site.

Online font repositories also take care of any licensing issues. Fonts, much like images, are generally protected by copyright law; be sure that you have permission before uploading a font and making it available on the web.

You can start by using the fonts available from the Google Font Directory or from Font Squirrel, as described in this list:

  • Google Font Directory: The Google Font Directory lets you easily use any font in the directory on your web pages. In the sections that follow, you find detailed instructions for using a font from the Google Font Directory in your page designs.

  • Font Squirrel: FontSquirrel makes it easy to use any number of free fonts on your web pages. Essentially, the folks at Font Squirrel have collected all the best free fonts (again, no worries about licensing issues). To include one of these free fonts, just download a font-face kit.

    Font Squirrel also has one of the best font generators online. If you have a custom font, use the font generator to generate the four font types and the code you need in order to use any font on your web pages.

    For instance, when we created a site for Intel, we put its font through the generator on Font Squirrel and then were able to use the custom-created “Intel font” rather than an image of its logo. Note: Font Squirrel requires that you have permission to use a font before you upload it and run it through its generator.

The Apple iOS supports True Type Fonts (TTF) and Scalable Vector Graphics (SVG) versions of a font. Because TTF and SVG are vector based, they can be scaled up or down with no loss of quality, making them an ideal choice. TTF files are generally smaller. If a user has an iOS older than 4.2, the device downloads and uses the SVG automatically rather than use the TTF.