HTML Fonts! Please Help!

Discussion in 'Web Design and Development' started by JHacker, Sep 23, 2006.

  1. JHacker macrumors 6502

    JHacker

    Joined:
    Aug 27, 2006
    Location:
    East Coast
    #1
    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?
     
  2. telecomm macrumors 65816

    telecomm

    Joined:
    Nov 30, 2003
    Location:
    Rome
    #2
    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?
     
  3. iMeowbot macrumors G3

    iMeowbot

    Joined:
    Aug 30, 2003
    #3
    Google for Embedded OpenType and TrueDoc. Unfortunately there is very limited browser support for either of these.
     
  4. Makosuke macrumors 603

    Joined:
    Aug 15, 2001
    Location:
    The Cool Part of CA, USA
    #4
    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.
     
  5. eto macrumors member

    Joined:
    Apr 27, 2006
    Location:
    20,000 leagues under the sea and or Duluth
    #5
    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:)
     
  6. JHacker thread starter macrumors 6502

    JHacker

    Joined:
    Aug 27, 2006
    Location:
    East Coast
    #6
    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?
     
  7. Mitthrawnuruodo Moderator emeritus

    Mitthrawnuruodo

    Joined:
    Mar 10, 2004
    Location:
    Bergen, Norway
    #7
    I wouldn't use it for all the text on a web page, but for headlines and such sIFR works fairly well... :)
     
  8. iMeowbot macrumors G3

    iMeowbot

    Joined:
    Aug 30, 2003
    #8
    Unless you want to target only IE and old versions of Netscape, that's pretty much where it stands.
     
  9. eto macrumors member

    Joined:
    Apr 27, 2006
    Location:
    20,000 leagues under the sea and or Duluth
    #9

    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.
     
  10. Makosuke macrumors 603

    Joined:
    Aug 15, 2001
    Location:
    The Cool Part of CA, USA
    #10
    That's a neat little dodad that I've never run across before. Nice--I learned something good today.
     

Share This Page