SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    May 2007
    Location
    London UK
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Conditional CSS based on Fonts available/installed

    I'm aware that we shouldn't be worried about being pixel-perfect with everything, but when you have a picky client and you're picky yourself...

    Is it possible to detect if a font is installed and if so, use a slightly different css style for that situation?

    E.g. Corporate font for client is Frutiger, available on a few macs and hardly any PCs. Client want the site to use Frutiger Reg, when available and fall back to Helvetica, then Arial in the stack.

    Helvetica and arial have quite a deeper x-height to Frutiger. We have some text base-aligning with the bottom of a logo and When viewed with Frutiger on the box, it aligns perfect. When viewed using Arial/Helvetica box, the text is about 2 r 3 pixels too low down.

    So can we check if a font is available on a pc and serve up a conditional bit of css and if yes... HOW?

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,088
    Mentioned
    256 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by Dozza View Post
    So can we check if a font is available on a pc...
    I don't think so - and I sincerely hope not. I don't want anybody's website trying to detect what I have installed on my computer.

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,882
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    I don't think so - and I sincerely hope not. I don't want anybody's website trying to detect what I have installed on my computer.
    Without going down the route of scanning the user's computer, what would be good would be to able to specify, for example:
    {font:calibri 110%, verdana 90%, arial 100%;}
    so that the browser chooses the appropriate font size for whichever font it is using. Unfortunately I'm not aware of a way to do even that.

  4. #4
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    It seems like you are looking at the issue from the wrong end... since if the browser has the font it will use it and then you have the option of embedding fonts. Furthermore you cannot really determine other display setting the user may be using down to a pixel, what if I have a zoomed text, or override some browser settings, etc.

  5. #5
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am wondering if the font value can be placed in the BODY within the CSS (frutiger, helvetica, arial). Then Javascript could detect the font being used by the computer, then the script could dynamically place both an attribute and value to, say, a <p> element: like <p rel="frutiger">, then in the CSS do a selector like this: p[rel*="frutiger"] { font-size: 100%; }.

    Would that work? I don't know if it is possible for Javascript to detect that though.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Dozza View Post
    Client want the site to use Frutiger Reg, when available and fall back to Helvetica, then Arial in the stack.
    That's the real problem. You should try to choose fallback fonts that more closely closely match the preferred font. E.g.

    Code:
    font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,147
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    I think you need to make it clear to the client and yourself that their computer is not the only one there is in the world. Likely look at the site on ten different monitors and they will all look *slightly* different. Perhaps there is a more effective way of achieving the design goal than what you doing taking all this into account.
    The only code I hate more than my own is everyone else's.


Bookmarks

Posting Permissions

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