Haven’t you always wished that you could use whatever typeface you wanted to on your web page? Now you can by using the @font-face selector in your CSS:

@font-face example

@font-face example

Sample from class:


@font-face {
font-family: 'EurostileLTStd-Bold';
src: url('fonts/EurostileLTStd-Bold.otf') format('opentype');
font-weight: normal;
font-style: normal;
}

Step One: Finding a Font

Only TrueType or OpenType fonts will be able to be linked to to your web page.

There are plenty of fonts available for purchase from various vendors:

Arial® Black from Fonts.com

Arial® Black from Fonts.com

See Also:

Note: You will need to see if the font you choose can be licensed for use on your web page. This means that you will need to look into using this font legally via the font’s EULA.

If you have a  PostScript font that you would like to use, you will need to convert it to TrueType or OpenType with the Free Font Converter.

Step Two: Converting the Font for Usage

You will need to convert the font for use across multiple browsers. Use the @font-face Kit Generator, by Font Squirrel to convert your fonts to all of the appropriate formats:

Create Your Own @font-face Kits at Font Squirrel

Create Your Own @font-face Kits at Font Squirrel

See Also: @font-face made simple tool | CodeAndMore

Once you upload your fonts, you can download your font kit with all of the appropriate formats:

Your Font Kit from Font Squirrel

Your Font Kit from Font Squirrel

The @font-face Kit Generator, by Font Squirrel will also supply you with a specimen demo file so you can preview your font:

Arial MT Std Black Specimen

Arial MT Std Black Specimen

Step Three: Implement and Test Your Fonts

Font Squirrel also supplies a style sheet that you can copy and paste into your page:


/* Generated by Font Squirrel (http://www.fontsquirrel.com) on February 15, 2011 */

@font-face {
font-family: 'ArialMTStdBlack';
src: url('arialmtstd-black-webfont.eot?') format('eot'),
url('arialmtstd-black-webfont.woff') format('woff'),
url('arialmtstd-black-webfont.ttf') format('truetype'),
url('arialmtstd-black-webfont.svg#webfontvXHkqCMg') format('svg');
font-weight: normal;
font-style: normal;

}

Note: Make sure you adjust the file path to your fonts.

Then you can use your new web linked font:


h2 {
width: 500px;
font-family: 'ArialMTStdBlack', Arial, Helvetica, sans-serif;
font-size: 21px;
line-height: 21px;
font-weight: normal !important ;
font-style: normal;
padding-top: 8px;
margin-right: 0px;
margin-bottom: 2px;
margin-left: 50px;
}

Note: @font-face validates with CSS2 or CSS3. But, not CSS2.1.

You will then be able to see your font in action:

Setting Type for the Web

Setting Type for the Web by Mike Sinkula

See Also:

This portion of the Premium Design Works website is written by Mike Sinkula and dedicated to the Web Design & Development students at Seattle Central Community College and the Human Centered Design & Engineering students at the University of Washington.

11 Comments:

  1. Hey there! This is my first visit to your blog! We are a group of volunteers and starting a new project in a community in the same niche.

    Your blog provided us beneficial information to work on.
    You have done a marvellous job! http://opaq.in/club/blog/view/40835/minuscule-business-article-detail-1286467-articleid-1286467-articles

  2. Exploring digg.com I noticed your website book-marked as:
    Web Font Linking with @font-face | WEB112 | Premium Design Works.
    I am assuming you book-marked it yourself and wanted to ask if social bookmarking gets you a large amount of site visitors?
    I’ve been thinking of doing some bookmarking for a few of my websites but wasn’t sure if it would
    yield any positive results. Thank you so much.

  3. In the event it comes to writing excellent written
    content you definitely are the don, high five
    from me. . !

  4. Myrtis says:

    Great article on Web Font Linking with @font-face | WEB112 | Premium Design Works.

    It is definitely one of the most useful that Ive seen in a
    very long time.

  5. Thane Gill says:

    The Font Squirrel converter has block some of the major foundries fonts from being converted. If that is the case for you I’d use this one:

    http://fontface.codeandmore.com/

  6. eric carter says:

    Art Files 2 is a Macintosh File Collection Utility that will collect fonts and linked images from your Illustrator document:

    http://www.code-line.com/software/artfiles/

  7. Kianoush Moradian says:

    25 Completely Free Fonts Perfect for @fontface

    http://speckyboy.com/2010/07/04/25-completely-free-fonts-perfect-for-fontface/

  8. BTW – The @Font Face Kit Generator only works on typefaces that are 2MB or less.

  9. Sandy Wright says:

    Sweet!
    The ” src: local(‘☺’) ” is cute.
    Another thing, I tried the Font Squirrel generator with various fonts already installed on my comp, and they too can be “generated.”
    It’s fun being a big NERD, right? :)

Trackbacks:

Leave a Comment:

Don't forget to get your Globally Recognized Avatar.