SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Should you only use web fonts?

    I am converting a layout to HTML/CSS and the font used is 'Interstate'. What should I replace it with? Should I look for the most similar web font (any suggestions) or use some kind of font replacement function.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    If the font is freely available on the web, you could consider serving it to users with CSS, via @fontface, but not all fonts are really optimized for this kind of use on the web, and @fontface is very raw and unrefined at the moment.

    It would be better to identify a few fonts that are commonly available on most computers and that resemble the font you are using. Font support by browsers and font makers is not very good at this stage, but the landscape is rapidly changing.

  3. #3
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ralph is dead on.

    Although this list is old it's still a good reference.
    http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is no such thing as universal fonts. I'm willing to bet that there isn't a single font in common on my Linux machine and a typical Windows system.

    That's why CSS offers fallback lists for font-family.
    Yes, there is also @font-face, but those of us on slow connections may not want to download an 8 MB font just to look at one site, so you should still use fallback lists.
    Birnam wood is come to Dunsinane

  5. #5
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    There is no such thing as universal fonts. I'm willing to bet that there isn't a single font in common on my Linux machine and a typical Windows system.
    What? You don't have Microsoft TrueType core fonts installed?

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  6. #6
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    If I remember some of our earlier conversations correctly (and being quite cheeky in speaking for him), Tommy is like a lot of Linux users and wants to stick to Linux fonts whenever possible. And well he should. It's simple as pie to include Linux fonts in your stacks -- hell, at the beginning, where they actually have a chance of being used by Linux users who may have the MS core fonts installed, and who see 90% of the Web in combinations of Arial, Tahoma, Georgia, and Times New Roman. I really like the families of Linux fonts I'm familiar with: Liberation, Deja Vu, Nimbus, Bitstream, and Luxi.

    Harri, no disrespect, but your "quiz" answers are all but meaningless. It's like asking me the best dog to choose for hunting and having one of the choices "purple" and the other "Chevrolet." All Web fonts display in HTML, so that choice can be set aside. WYSIWYG is irrelevant, so that one's gone. And all fonts you're likely to see on anyone's Web pages are available on the Internet in one form or another, so that one's out. (And no one with any sense uses images as body text.)

    What you're asking is what fonts are "safe" to use on the Web. In the strictest sense, the answer is "none," because there's no guarantee that every off-brand computer in the wilds of the Internet has a particular font installed on it. Even Arial and Times New Roman, with 99+% market penetration, aren't on every single machine in existence. Let me be really cheeky and send you to an article I wrote in 2009 that addresses some of what you're asking.

    As for WebDonkey's question about a replacement for Interstate, it's a fairly straightforward Frutiger-like sans-serif font. You can go with the usual suspects: Helvetica, Arial, Tahoma, Liberation Sans, all the other more narrow sans-serif fonts, without any real problems, I'd say, though I can't promise the sizes will correlate perfectly. Test, test, test, and in different browsers on different OS's.

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gary.turner View Post
    What? You don't have Microsoft TrueType core fonts installed?
    No.

    Quote Originally Posted by Black Max View Post
    Tommy is like a lot of Linux users and wants to stick to Linux fonts whenever possible.
    It's not that. I just don't see a reason to jump through hoops and track down and install a bunch of fonts just because web designers can't be bothered to provide a decent font stack. On the other hand, as long as they use a generic font family at the end of the list, I can pretty much decide what fonts I want their sites to use ...

    Off Topic:

    Quote Originally Posted by Black Max View Post
    Harri, no disrespect, but your "quiz" answers are all but meaningless.
    'Harri' is a spammer, not here to ask pertinent questions or make a contribution. Just look at the fake signature in his post. He's just copied and pasted some rubbish from the 'Net to gain exposure for his unethical business. It's hardly a coincidence that it includes an 'SEO' company. He probably doesn't even understand that this sort of 'SEO' only exposes him as a totally clueless dilettante.

    Don't feed the trolls!
    Birnam wood is come to Dunsinane

  8. #8
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    'Harri' is a spammer, not here to ask pertinent questions or make a contribution. Just look at the fake signature in his post. He's just copied and pasted some rubbish from the 'Net to gain exposure for his unethical business. It's hardly a coincidence that it includes an 'SEO' company. He probably doesn't even understand that this sort of 'SEO' only exposes him as a totally clueless dilettante.
    Tommy, I hadn't figured that out when I made that comment. I took a look at his other posts and put 2 and 2 together. Sometimes my troll radar malfunctions....

    I see he has departed our shores, so, happy trails, Harri!

  9. #9
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    (re msttcorefonts)No.
    OK, I thought they were ready packaged in most distros, at least Debian and Fedora.
    (re Black Max post:Tommy is like a lot of Linux users and wants to stick to Linux fonts whenever possible.) It's not that. I just don't see a reason to jump through hoops and track down and install a bunch of fonts just because web designers can't be bothered to provide a decent font stack.
    I'd agree except that the msttcorefonts are ubiquitous and readily available as deb and rpm packages (thank the gods RH finally got a decent package manager). And, they provide a reasonable representation of MS fonts on a real, productive OS.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  10. #10
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by WebDonkey View Post
    I am converting a layout to HTML/CSS and the font used is 'Interstate'. What should I replace it with? Should I look for the most similar web font (any suggestions) or use some kind of font replacement function.
    First up, there's no harm in having web-unsafe fonts in your site - put them at the top of your stack, and then have a more common font, a most common font and finally a generic like 'sans serif'. Always try to choose fonts that are as similar as possible to your preferred font, in size, shape and feel.

    Font replacement techniques are varied. If you are talking about something like sIFR, that should only ever be used for very short items like headings, not for body text, because the rendering and processor requirements add a deadly latency that ruins the experience on any computer lesser than Deep Thought. Some fonts can be 'embedded' or set to download on use, and there are various different techniques for this, but in each case you have to consider the licensing arrangements - most fonts can not be used in this manner.

  11. #11
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    there's no harm in having web-unsafe fonts in your site - put them at the top of your stack, and then have a more common font, a most common font and finally a generic like 'sans serif'. Always try to choose fonts that are as similar as possible to your preferred font, in size, shape and feel.
    Exactly. Here's the way I do it (sort of), in a particular @font-family declaration:

    cool font, Linux font, Mac font, Windows font, ubiquitous font, generic

    Say you want a cool, retro sans-serif font stack. You might do:

    Code:
    Frutiger, "Liberation Sans", Helvetica, Arial, sans-serif
    The 3% or so with Frutiger get to see your design in all its glory. Liberation Sans gives a close approximation for Linux users; Helvetica covers the Mac crowd, and Arial gets the Windows (and everyone else, since it is quite ubiquitous on its own). The final generic "sans-serif" gets the .01% of users with some strange font compilations so at least your elements display in some sans-serif font.

  12. #12
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Black Max View Post
    Sometimes my troll radar malfunctions....
    After several years as a moderator here, mine is fairly well-tuned.

    Quote Originally Posted by gary.turner View Post
    OK, I thought they were ready packaged in most distros, at least Debian and Fedora.
    I'm running Fedora 12 (latest stable version) and it didn't come with those fonts.
    Birnam wood is come to Dunsinane

  13. #13
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    If the font is freely available on the web, you could consider serving it to users with CSS, via @fontface
    You didn't mention the legalities! Naughty

    Even if a font is free it doesn't mean it's free of copyright or free for commercial use

    PS: The below resources are much better than Ampsoft's outdated guide:

    http://www.speaking-in-styles.com/we...eb-Safe-Fonts/
    http://www.codestyle.org/css/font-fa...ultsFull.shtml
    http://www.apaddedcell.com/web-fonts

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    You didn't mention the legalities! Naughty
    Yes, thanks Alex. I did start to doubt that comment after posting. A bit too hasty.

  15. #15
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    After several years as a moderator here, mine is fairly well-tuned.
    Since they've made the decision to give me a gavel, I'm going to have to work on tuning mine up. Any insights or tips you have, please feel free to share them.

    Off Topic:

    Mrs. Max says hi. Quit making oogly eyes at my better half!

  16. #16
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Black Max View Post
    Since they've made the decision to give me a gavel, I'm going to have to work on tuning mine up.
    Well, look at that! Congratulations! You look dazzling in green.

    Quote Originally Posted by Black Max View Post
    Any insights or tips you have, please feel free to share them.
    When in doubt, shoot to kill!

    Off Topic:

    Quote Originally Posted by Black Max View Post
    Quit making oogly eyes at my better half!
    Can you blame me? And don't think I'm intimidated by your shiny green uniform, either!
    Birnam wood is come to Dunsinane

  17. #17
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Well, look at that! Congratulations! You look dazzling in green.
    New advisors are issued phasers to go with the spiffy green uniforms, so watch your step, ice boy. Mine's set on "deep fat fry." And the green does go well with my bleary red-rimmed soulful brown eyes....


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
  •