views:

29

answers:

5

I know that I can use fonts like arial "for free". But what if I want to use not a standard font ?

Is that something that a browser should support ?

Where I can check, for example, which fonts Firefox 3.6.3 supports ?

I would like, for example, to change the font of input text area.

A: 

The only "fonts" that are universally supported are serif, sans-serif, and monospace. If you want anything else fancier then either try your luck and specify it, or embed it.

Ignacio Vazquez-Abrams
+1  A: 

Fonts aren't supported by browsers; they're supported by systems. Either your user has Comic Sans installed across their entire computer, or they don't have it installed at all.

However, the new CSS3 spec allows you to distribute your own fonts with your webpage. It's currently only supported by the latest versions of Firefox, Safari, Google Chrome, and Opera, though.

To some extent, though, this shouldn't matter. You can embed the font, and users with the latest technology get to enjoy it, or else they get the fallback font. Beyond logos, your designs typically shouldn't hinge on fonts entirely, right?

Matchu
IE supports other fonts too. The complicating factor is that different browsers require different formats.
David Johnstone
A: 

Or one trick that you can try is that if you're using the font for a small amount of text, you can go into photoshop, type the text using the font you want, and then (depending on the variety of colors) save it as a image file. If for a small bit of text, the download speed is negligent.

For black and white text I personally like gif format, colorful ones I would use jpg or png (although I'm starting to like png more and more).

Sorry, I just realized you want to change the font of the input text area (didn't get to read the last line), but for any other text like on a standard html page, this method should do.

chimgrrl
PNG > JPEG, unless it's a real-life photo.
Matchu
Wow, I learn something new every day. Thanks for the headsup :)
chimgrrl
A: 

Where I can check, for example, which fonts Firefox 3.6.3 supports ?

Browsers do not have to support it, they render it, it is the operating system which shows the right font for you.

When you use non-standard font, it is highly possible that that font may not be installed on users' system. Therefore, you should go for standard fonts such as serif, sans-serif, etc.

If however, you want to go for non-standard font, then you are expected to tell user's when to get that fon't from which is not a good practice at all.

In the font-family css style, you can specify font names separated by commas like:

font-family:fancy, arial, verdana

In the above case, if custom fancy font will be available on users' system, it will be used else arial will be used and so on.

Finally, have a look at:

sIFR – Use custom fonts in your website safely

sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash.

Sarfraz
+1  A: 

There are a few sites out there that have an easy interface for creating type CSS for Windows, Mac, or both, with relatively 'safe' font options that are used by the majority of web users.

Check out: http://www.typetester.org - it has a handy preview interface and 'export to CSS' options.

Keep in mind that mobile devices are on the increase and using custom fonts (CSS2 at least) may have mixed results).

computerjules