SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can someone explain how fonts work with HTML?

    They way I believe how fonts work, is that there are only a small limited amount of fonts available cross all browsers.

    And if we want a font that is not supported we have to turn that button/link or whatever it may be into an image.

    Is there anything out that allows us to use non-traditional font without having to turn them into images?

    I thought I read something one time about an online font library you could use with your web sites?

    It seems to me you could link to an extensive online font library resource (much like you do to a jquery library) and virtually pull up any font you want across all browsers? Is there anything like this?

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    You're right about the first part (limited browser set). I've used this list as a guide for a long time: Common fonts to all versions of Windows & Mac equivalents (Browser safe fonts) - Web design tips & tricks

    You want to look into @font-face (google it and you'll get a billion good things).

    The thing to be careful with: font files can be large. When you use @font, the whole font has to be loaded, not just the characters you use. This means adding even one special font to your page can cause it to take a much longer time to load.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,104
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Bades View Post
    It seems to me you could link to an extensive online font library resource (much like you do to a jquery library) and virtually pull up any font you want across all browsers? Is there anything like this?
    Yep, that's common now. There are thousands of fonts available. Some services are free, many more charge a fee. Here are some examples:

    Free
    Google Web Fonts
    Font Squirrel | Download Hundreds of Free @font-face Fonts
    Good Web Fonts for Online Text
    30 Beautiful and Free Fonts You Can Use with @font-face | DesignLovr
    Fonts available for @font-face embedding - Webfonts.info
    The League of Moveable Type
    exljbris Font Foundry
    The League of Moveable Type
    exljbris Font Foundry
    http://designlovr.com/30-beautiful-a...ith-font-face/
    Font Squirrel | Download Hundreds of Free @font-face Fonts
    Webfonts.info
    Google Font API - Google Code
    dafont.com


    Commercial
    Fontdeck web fonts: Real fonts for your website
    Typekit
    Desktop and @font-face fonts | Fontspring
    Webtype
    TypeFront
    Fonts.com Web Fonts
    WebINK Web Fonts
    @font-face
    Web Fonts: Custom fonts using @font-face, cross-browser font embedding
    Fonts.com Web Fonts
    Web Fonts. Delivered ∗ Kernest
    Fonts Live - Expertly Crafted Web Fonts from Monotype Imaging
    Ascender Fonts - High Quality Fonts For Download - Buy Fonts
    Ascender launches FontsLive.com - new web fonts site
    exljbris Font Foundry
    Ascender Corporation | Typophile


    Lists & Articles
    Web font hosting services - An Overview - by sprungmarker.de
    A List Apart: Articles: Web Fonts at the Crossing
    Spice Up Your Web Typography with @Font-Face
    The Essential Guide to @font-face
    Details on the new Google Webfont API Paul Irish
    Font licence? - SitePoint Forums
    FontFonts on the Web, Starting Today | The FontFeed
    Bulletproof @font-face syntax Paul Irish
    @font-face in IE: Making Web Fonts Work — Jon Tan
    beautiful fonts with @font-face ✩ Mozilla Hacks – the Web developer blog
    Font Squirrel | Create Your Own @font-face Kits
    Bulletproof @font-face – Jeffrey Zeldman Presents The Daily Report
    embedding fonts - SitePoint Forums
    A List Apart: Articles: Real Web Type in Real Web Context
    CSS 3 Font Face | Zen Elements

    EDIT: samanime beat me to it, but hopefully some useful links above.
    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."

  4. #4
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys!

  5. #5
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Another question to consider is ... does it actually matter if people don't all see your site in the same font? You might want to go for a consistent approach to headings (whether it's web safe or downloaded/embedded/linked fonts) if they are key to your branding, but beyond that, there's nothing wrong with setting fonts that people might or might not have, eg
    Code:
    body {font-family:'franklin gothic book', calibri, arial, sans-serif;}
    I don't want to go down to the lowest common denominator, I want people to use my preferred fonts where they can, but at the same time I'm not going to add massive download overhead for something as trivial as body text. And guess what ... in twelve years, I've never had anyone complain that they see the site in a different font.

  6. #6
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    That's a good point, Stevie.

    Where I work, our designer is a big fan of Myriad Pro, so that's at the beginning of all of our sites. But it's not that unique (or big of a deal if everyone doesn't see it), so I always add Arial, Helvetica, sans-serif to the stack for those that don't have it. It still looks good either way.

    And Ralph, that's a pretty epic list. I'm going to keep that handy for myself. =p

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,104
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Yes, Myriad Pro is much nicer than Arial et al., but most people don't have it on their computer so won't see it. Haven't checked if it's available as a web font, though. That does change things a lot.

    As for the list, I tend to record anything I find, and then end up with big lists like that.
    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."

  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)
    I believe Myriad Pro is available on most Macs, but not Windows.


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
  •