Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    is there a cross-browser way to display a custom font?

    Hey all.

    I'm doing a webpage for a friend who is an artist, and she has a particular font she wishes the text of the web page to be displayed in.

    what code would I use to make a font avaliable for users, and have it used to display the text?

    also, since i would like it to be cross browser, if there are different syntaxes for the different browsers... toss them all over and i'll use JS to determine which browser and use that code accordingly.

    Thanks,
    Jay
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    SIFR
    The above is probably your only possible solution.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    http://www.alistapart.com/articles/dynatext

    I haven't tried it but it seems to be that if the user doesn't have javascript or images turned on than the effect won't happen but it will write the text as normal. Since it also says that the element can be id's and classes, it shuold be real easy to modify for your needs. Just slapping the 'filter' to apply to your <p class="content"> or whatever.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    I've tried them both and I have to say that SIFR is the clear winner. I hope she's not set on using it for body text, though— that'll slow your pages down to a crawl, and most likely break most browsers.

    I think really you should just sit her down for a good old-fashioned "the web is not print" story, or build the site in Flash.

  • #5
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    *Shudders* eurgh... total flash site, i think i'm going to have nightmares.

    k, so the font is out because she would want all the text on the site to be in the same font, especially the body text.

    the only option left is to make her choose a web-ready font. can someone provide me a url to a page with examples of all of the web fonts? i havent been lucky finding one on google but it has to exist. knowing her she'll want to choose.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Web fonts are just essentially fonts you are certain are installed on any computer. In other words, any font can be displayed as text in an html page, as long as it's installed. It's more of a cross-platform thing rather than a cross-browser thing.

    Here's your page: http://www.accordmarketing.com/tid/a...safefonts.html

    A major factor in the attractiveness of a web font is how it's laid out. Check out ALA for some beautiful typography (IMO).
    Last edited by rmedek; 12-31-2005 at 05:40 AM.

  • #7
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    so if I wanted to use the font Trebuchet, as described in the list you provided... the exact code be <font face="Trebuchet MS">, right?

    and can I be guaranteed that all users would see that?
    Last edited by canadianjameson; 12-31-2005 at 06:31 AM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #8
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by canadianjameson
    so if I wanted to use the font Trebuchet, as described in the list you provided... the exact code be <font face="Trebuchet MS">, right?
    FOR THE HOLY LOVE OF GOD, MAN… you should know better than that. The <font> tag?!

    Use stylesheets:
    Code:
    body {
     font-family: "trebuchet ms", verdana, arial, sans-serif;
    }
    The browser will try the first one first. If it doesn't have that installed, it tries the next, and so on until it's at "sans-serif" which just means the browser's default sans-serif font.

    Using that, you could always try any fancy font you want:
    Code:
    body {
     font-family: "fancy pants font", "trebuchet ms", arial, sans-serif;
    }
    If the browser doesn't have "fancy pants" installed it'll try Trebuchet next and then arial, etc., etc.

    I usually do something like this for my fonts:
    Code:
    body {
     font: 69%/1.8em "lucida grande", verdana, arial, sans-serif;
    }
    Which put text at 69% of 1em, with a 1.8em line-spacing, and tries Lucida Grande first for my Mac friends.

    Check out all of the font commands here: http://www.w3schools.com/css/css_reference.asp#font

  • #9
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    hhaha i love it, i was just about to ask you what was wrong with this code:

    BODY {
    font-family: Trebuchet MS 12px;
    }

    lol

    great minds i guess.

    question: I'm going to use as much CSS as I can on this page... but should I only use it for re-occuring properties, or every single property?

    also, should I still be using tables, or are DIV's really the way to go?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #10
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    its odd, the font size wont work...

    body {
    font-family: "trebuchet ms", verdana, arial, sans-serif;
    font-size: 10px;}
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #11
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    It depends on if you are serious about this whole web thing, really. If it's a one-off, personal site I say do whatever's easier.

    But really, separation of style and content is where it's at. It's not about divs versus tables or re-occuring versus one-time properties—it's about keeping the different elements of your website separate so they don't get in the way of each other.

    When I coded with tables, I was a 92-pound weakling. Since I switched, I've gotten in better shape and I'm more attractive. Smarter, too, I'm pretty sure. The ladies love it.

    Edit: Make sure the font-size is affecting the right things. Are you putting the text in a <p> tag? then you'll need to do this:
    Code:
    body {
     font-family: "trebuchet ms", sans-serif;
    }
    
    p {
     font-size: 10px;
    }
    My earlier example above uses percentages, so I don't need to declare a specific size on <p> elements or anything else, unless I want something other than the default em size.
    Last edited by rmedek; 12-31-2005 at 06:53 AM.

  • #12
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    i asked about the DIV's because i'm intimidated by the positioning of them.

    i once had a webpage completly perfect on my screen and I went to show it off at a friends house... he had a different resolution than me and EVERYTHING was out of place, overlapping, etc.



    *crawls under sheets*

    thats what I'm really scared of... its designing a page with either absolute or % widths & heights, and then it looking screwy on other peoples comps. its like beer goggles for coding
    Last edited by canadianjameson; 12-31-2005 at 06:54 AM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #13
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by canadianjameson
    thats what I'm really scared of... its designing a page with either absolute or % widths & heights, and then it looking screwy on other peoples comps. its like beer goggles for coding
    Well, sure, but just like beer goggles, it's a mighty good time up to that point.

    CSS just takes practice and a different train of thought, I've found. I'm certainly no expert, either… One of the tricks I've picked up is to design for change right away rather than at the end. For example, I tend to overcode things like headers and navigation knowing I can change them later if I want, or that a different screen resolution might stick them somewhere else.

  • #14
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    another hesistation of mine is as follows, and you may be able to alleviate my fears about this as well as about the DIV positioning on a page with regards to different screen resolutions and aesthetics.

    If I dont specify a font size and the user has their "text-size" option at anything other than what I have on mine, wont it screw up my text & object allignment, therefore ruining any effect I have triend to create by placing text and objects where they are?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #15
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rmedek
    I tend to overcode things like headers and navigation knowing I can change them later if I want, or that a different screen resolution might stick them somewhere else.
    what do you mean? do you mean you can actually specify that "if this resolution, place here". ? how does overcodding help prevent resolution mishaps?

    i'll be back on early tomorrow morning. thanks for the help to date.

    do you know of a short, clear, and concise tutorial on proper DIV placements to avoid these issues?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •