All Articles Web
Using Webfonts For Terrific Type Online
Iain Anderson on Sun, March 25th 0 comments
Don't know your TrueType from your WOFF? Got EOT and SVG in a twist? Or perhaps you just want to learn how to get hold of excellent pre-made fonts and generate your own… Iain Anderson types it out.

A couple of years ago, all major browsers gained the ability to load fonts supplied over the Internet, not just from the end-user’s computer. It took a while, and there’s still disagreement over the best format, but there’s no need to stick to standard fonts any more. Every browser from iPhone's Safari to Internet Explorer can see much more than Verdana, Arial and Georgia. 

Why did it take so long? Licensing, for one. Format confusion is another reason. Today, you can license fonts in many formats using a paid service, or use free fonts in many formats from a free service. Either way, you’ll need to supply the same font in multiple formats to keep everyone happy. They are:

  • TrueType for most modern browsers (FireFox 3.5+, Opera 10+, Safari 3.1+, Chrome 4.0.249.4+ as well as iOS 4.2+)
  • WOFF (Web Open Font Format) for some modern browsers (Firefox 3.6+, Internet Explorer 9+, Chrome 5+)
  • EOT for Internet Explorer 4+
  • SVG fonts for devices running iOS 3.1 – 4.0

We’ll use the fantastic Font Squirrel to supply our free fonts in this tutorial. They offer hundreds of pre-made @font-face kits, and the ability to generate your own kits from your own fonts. If you’re converting free fonts you didn’t make yourself, be careful not to breach any licenses.


Step 1

Here, I’ve chosen the Sansumi font, by Manfred Klein.

http://www.fontsquirrel.com/fonts/Sansumi

On this page, choose the @font-face Kit link, then press the large “Download @font-face Kit” button at the bottom — not the Download TTF button at the top.

Font squirrel


Step 2

You’ll now download a .zip package of a number of fonts and some support files. Take a look at the CSS file in Dreamweaver or a text editor, to see something like this:

@font-face {

    font-family: 'SansumiRegular';

    src: url('Sansumi-Bold-webfont.eot');

    src: url('Sansumi-Bold-webfont.eot?#iefix') format('embedded-opentype'),

         url('Sansumi-Bold-webfont.woff') format('woff'),

         url('Sansumi-Bold-webfont.ttf') format('truetype'),

         url('Sansumi-Bold-webfont.svg#SansumiRegular') format('svg');

    font-weight: normal;

    font-style: normal;


}


@font-face {

    font-family: 'SansumiExtraBoldRegular';

    src: url('Sansumi-ExtraBold-webfont.eot');

    src: url('Sansumi-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),

         url('Sansumi-ExtraBold-webfont.woff') format('woff'),

         url('Sansumi-ExtraBold-webfont.ttf') format('truetype'),

         url('Sansumi-ExtraBold-webfont.svg#SansumiExtraBoldRegular') format('svg');

    font-weight: normal;

    font-style: normal;


}


You don’t need to worry about most of this. The important part is the name given after “font-family”: take note of it. This will be the name of the font that you’ll use in your regular CSS rules, just like you’d use the name of a regular font like Verdana. Link to this CSS file, include the fonts, and everything will work. So, let’s do it:

  1. Create a new HTML page in Dreamweaver.
  2. Save the file as index.html in the folder you downloaded (for example: “Sansumi-fontfacekit”).
  3. Use Design view to type a few paragraphs of text.
  4. Use the Properties panel to tag part of the page as “Heading 1”

Sansumi downloaded


Step 3

Using the CSS panel, press the “chain link” icon, then Link the “stylesheet.css” stylesheet to your document.

heading 1


Step 4

Using the CSS panel again, press the “plus” icon to create a new CSS rule. Choose “Tag” as the Selector Type, then set “h1” as the selector name.

link stylesheet


Step 5

In the font-family field, type “SansumiExtraBoldRegular, Verdana, sans-serif”. Verdana will be used if the custom font can’t be loaded for some reason.

The H1 tag


Step 6

Save, then Preview in the browser of your choice. It should work in just about any Mac browser, though not in Dreamweaver itself. While the custom font is used, text remains selectable and searchable, and overhead is minimal.

It’s also worth adding a CSS rule for the “body” tag to make sure all your text shows up in a custom font. Your added CSS will then be:

h1 {

font-family: SansumiExtraBoldRegular, Verdana, sans-serif;

}

body {

font-family: SansumiRegular, Verdana, sans-serif;

}

setting the font family


The finished result

When you upload to your server, just include all the files in the folder as you normally would. As with any other design project, be careful not to use too many fonts (one for headings and one for body text should be enough). Finally, be sure to include a bold face if you’re making use of bold text, as different browsers interpret missing fonts differently.

finished result


Now go forth, and never use Verdana again.



Related Videos
Comments (0)

You must be logged in to comment.

UVI Falcon: The Video Manual
UVI Falcon 101
Dream It. Do It.
Do you want to learn UVI Falcon: The Video Manual?
Yes, I want to learn!
No Thanks, I just want to read the article.
Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: