HTML Fonts! Please Help!

[JHacker]

I see everyone here has a large collection of fonts in their arsenal. But is the only point of this using these fonts in photoshop or a like program.

I build some websites for myself and friends and have learned how to code html and css. So I know there are standard fonts that will show up with any browser.

But is there a way I can use downloaded fonts on a website without building an image in photoshop and using that on my site?

 

[telecomm]

Yeah, you can, for example, use a particular font for a particular element, by using, say, font-family: "century gothic", but whether or not it displays in that font will depend if the viewer has that font on their system. You can also declare backup fonts in this event.

Is this what you were asking?

 

[iMeowbot]

Google for Embedded OpenType and TrueDoc. Unfortunately there is very limited browser support for either of these.

 

[Makosuke]

I'm not entirely clear on the question either, but you can specify any font you want for text on a web page via CSS. The problem is, most people aren't going to have it installed, so only those who do will see the font as you intended. You can specify as long a list of alternates as you want, though, so you can always pick a "favorite", followed consecutively by things that are also installed and are more likely to be found on a large number of computers. Here's a very short list of fonts that MOST people have:

Serif
Times New Roman, Trebuchet MS, Georgia, Times (Mac), Palatino (Mac only)
Sans Serif
Aria, Verdana, Helvetica (Mac), Geneva
Monospaced typewriter style
Courier New, Lucida Console, Andale Mono, Courier
Cursive - scripts and informals
Comic Sans, Brush Script, Zapfino (very Mac-only), Marker Felt

Generally the way you want to specify is something like this:

font-family: "[the one you really want]", "[good alternate choice]", "[really common alternate, if you care]", [generic family];

Note that the generic families are (I think): serif, sans-serif, cursive, monospace, fantasy

So for example I might do: p { font-family: "Zapfino", "Trebuchet MS", cursive; }

..in which case if it was a new Mac, it would display in Zapfino, if not it would probably use Trebuchet MS, and if even that wasn't installed, it would pick whatever the default cursive font for that browser was and use that.

There is also a CSS3 module that provides for a way to actually download and install a font that doesn't exist on the target computer (vaguely akin to the way you can embed a font in a PDF document), but nothing supports it as far as I know, so it's only theoretical at this point.

Basically, non-graphical typography on the web sucks right now.

 

[eto]

try out A List Apart: Articles: Dynamic Text Replacement

pretty cool, basically you use php to generate any font that you upload to your server. your site does not have to be active php (just a couple of things set up on your server of course, PHP version 4.3 or higher, compiled with support for the GD graphics library, 1.6 or higher)(if you're paying for hosting these should be there or easily added upon request)

I've tried and it worked great but, it didn't really fit my need

give it a go

 

[JHacker]

Sorry if my question wasn't completely clear. I'm aware of font-families, however they seem pretty limited to me, as only a few will appear the same way on multiple browsers. I was just wondering if there was a way to get crazy fonts that I download to show up on everyone's browser, but I guess it would involve having the font installed on their computer, and that's no good.

So does this mean that it's only possible to have the few select fonts on a website? Like Times new Roman, Arial, Helvetica, etc?

 

[Mitthrawnuruodo]

I wouldn't use it for all the text on a web page, but for headlines and such sIFR works fairly well...

 

[iMeowbot]

So does this mean that it's only possible to have the few select fonts on a website? Like Times new Roman, Arial, Helvetica, etc?

Unless you want to target only IE and old versions of Netscape, that's pretty much where it stands.

 

[eto]

I was just wondering if there was a way to get crazy fonts that I download to show up on everyone's browser, but I guess it would involve having the font installed on their computer, and that's no good.

with the dynamic solution you are not embedding any fonts in your pages. you select which tags (via css) will contain text to be replaced by a dynamically generated png (via php and javascript)

hopes this clears some things up.

edit: the only things that can trip this solution up is if the client has either javascript or images turned off. according to w3c as of jan. 2006 90% of browsers have javascript enabled.

 

[Makosuke]

I wouldn't use it for all the text on a web page, but for headlines and such sIFR works fairly well...

That's a neat little dodad that I've never run across before. Nice--I learned something good today.