Can someone explain how fonts work with HTML?

They way I believe how fonts work, is that there are only a small limited amount of fonts available cross all browsers.

And if we want a font that is not supported we have to turn that button/link or whatever it may be into an image.

Is there anything out that allows us to use non-traditional font without having to turn them into images?

I thought I read something one time about an online font library you could use with your web sites?

It seems to me you could link to an extensive online font library resource (much like you do to a jquery library) and virtually pull up any font you want across all browsers? Is there anything like this?

You’re right about the first part (limited browser set). I’ve used this list as a guide for a long time: Common fonts to all versions of Windows & Mac equivalents (Browser safe fonts) - Web design tips & tricks

You want to look into @font-face (google it and you’ll get a billion good things).

The thing to be careful with: font files can be large. When you use @font, the whole font has to be loaded, not just the characters you use. This means adding even one special font to your page can cause it to take a much longer time to load.

Yep, that’s common now. There are thousands of fonts available. Some services are free, many more charge a fee. Here are some examples:

Free
Google Web Fonts
Font Squirrel | Download Hundreds of Free @font-face Fonts
Good Web Fonts for Online Text
30 Beautiful and Free Fonts You Can Use with @font-face | DesignLovr
Fonts available for @font-face embedding - Webfonts.info
The League of Moveable Type
exljbris Font Foundry
The League of Moveable Type
exljbris Font Foundry
http://designlovr.com/30-beautiful-a...ith-font-face/
Font Squirrel | Download Hundreds of Free @font-face Fonts
Webfonts.info
Google Font API - Google Code
dafont.com

Commercial
Fontdeck web fonts: Real fonts for your website
Typekit
Desktop and @font-face fonts | Fontspring
Webtype
TypeFront
Fonts.com Web Fonts
WebINK Web Fonts
@font-face
Web Fonts: Custom fonts using @font-face, cross-browser font embedding
Fonts.com Web Fonts
Web Fonts. Delivered ∗ Kernest
Fonts Live - Expertly Crafted Web Fonts from Monotype Imaging
Ascender Fonts - High Quality Fonts For Download - Buy Fonts
Ascender launches FontsLive.com - new web fonts site
exljbris Font Foundry
Ascender Corporation | Typophile

Lists & Articles
Web font hosting services - An Overview - by sprungmarker.de
A List Apart: Articles: Web Fonts at the Crossing
Spice Up Your Web Typography with @Font-Face
The Essential Guide to @font-face

Details on the new Google Webfont API « Paul Irish
Font licence? - SitePoint Forums
FontFonts on the Web, Starting Today | The FontFeed
Bulletproof @font-face syntax « Paul Irish
@font-face in IE: Making Web Fonts Work — Jon Tan
beautiful fonts with @font-face ✩ Mozilla Hacks – the Web developer blog
Font Squirrel | Create Your Own @font-face Kits
Bulletproof @font-face – Jeffrey Zeldman Presents The Daily Report
embedding fonts - SitePoint Forums
A List Apart: Articles: Real Web Type in Real Web Context
CSS 3 Font Face | Zen Elements

EDIT: samanime beat me to it, but hopefully some useful links above. :slight_smile:

Thanks guys!

Another question to consider is … does it actually matter if people don’t all see your site in the same font? You might want to go for a consistent approach to headings (whether it’s web safe or downloaded/embedded/linked fonts) if they are key to your branding, but beyond that, there’s nothing wrong with setting fonts that people might or might not have, eg

body {font-family:'franklin gothic book', calibri, arial, sans-serif;}

I don’t want to go down to the lowest common denominator, I want people to use my preferred fonts where they can, but at the same time I’m not going to add massive download overhead for something as trivial as body text. And guess what … in twelve years, I’ve never had anyone complain that they see the site in a different font.

That’s a good point, Stevie.

Where I work, our designer is a big fan of Myriad Pro, so that’s at the beginning of all of our sites. But it’s not that unique (or big of a deal if everyone doesn’t see it), so I always add Arial, Helvetica, sans-serif to the stack for those that don’t have it. It still looks good either way.

And Ralph, that’s a pretty epic list. I’m going to keep that handy for myself. =p

Yes, Myriad Pro is much nicer than Arial et al., but most people don’t have it on their computer so won’t see it. Haven’t checked if it’s available as a web font, though. That does change things a lot.

As for the list, I tend to record anything I find, and then end up with big lists like that. :rolleyes:

I believe Myriad Pro is available on most Macs, but not Windows.