Enhance Your Site with Custom Fonts - dummies

Enhance Your Site with Custom Fonts

To most web designers, the font of fonts does not runneth over. The 11 fonts built in to the Apple iOS, shown in this figure, are woefully inadequate. Serious designers spend hours searching for just the right font to convey the feeling they want to elicit in a design. That’s why many designers are excited that CSS 3 offers a new solution.


The @font-face option, new in CSS 3, enables you to link to any font that’s available from a web server. Add a little drop shadow and other styling elements with CSS, and you can create fantastic font effects without resorting to the old workaround for limited fonts: saving images of styled text created in Photoshop.

After you generate the code you need on Font Squirrel, you can start using the font on your web pages in a few simple steps. The following example shows the code you see if you run a custom font through the Font Squirrel generator.

First, you add the font to the head area of your page by using this syntax:

@font-face {
    font-family: 'GoodDogRegular';
    src: url('GoodDog-webfont.eot');
    src: url('GoodDog-webfont.eot?iefix') format('eot'),
         url('GoodDog-webfont.woff') format('woff'),
         url('GoodDog-webfont.ttf') format('truetype'),
         url('GoodDog-webfont.svg#webfontx1QlgLst') format('svg');
    font-weight: normal;
    font-style: normal;

Then you include the font in a style rule, and you can apply it to any text on your page.

.stylename {
    font-family: 'GoodDogRegular';

Follow these steps to add any of the fonts in the Google Font Directory to your pages:

  1. Open any web browser (we recommend Safari: the desktop version is closest to the version in iOS) and visit Google Web Fonts.

  2. Click the name of any font to select the font you want to use in your design.

  3. Click the Use This Font tab at the top of the page to generate the code you need, as shown.


  4. Copy the link in the first field and paste it into the head area of your web page.

  5. Copy the code for the font family from the second field on the Google Font Directory font page and paste it into the CSS style sheet for your web page.

    In the example shown, you see that Google has generated the rule in a style for the <h1> tag. You can use this code to create a style for the <h1> tag with the font you selected, but you also have the option of adding the font rule to any other CSS style.

  6. Apply the rule to text in your web page.

    If you use the entire <h1> rule provided by Google, any text formatted with the <h1> tag displays in that font. If you create a new class or ID style with the font as part of the rule, you apply the style to your text for the font to appear, just as you would have to apply any other style.