SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Enthusiast irish-ed's Avatar
    Join Date
    Oct 2007
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Embed fonts in webpage?

    Hi all,

    Very much a newbie question. If I use some nice fonts I found on my website, is there any way that the users can view these fonts on their browsers if they are not already installed on their machine?

  2. #2
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope - not cross-browser as pure text.

    You'd have to use image replacement methods of some sort.

    All you can do for pure text is make suggestions in the CSS - listing the preferred font and a couple of alternatives but there's no way to ensure that the end-users see what you want.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  3. #3
    Django Jedi neron-fx's Avatar
    Join Date
    Sep 2007
    Location
    Bristol/Bath, UK
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi irish-ed,

    There is no real cross browser compatible way of doing it. If you arent too worried about usability/ accessibility etc etc you could try Microsoft Weft.

    With this utility, you can create one EOT file for each font you wish to embed. You then code the pages to point to the font files by adding a <STYLE> element to the portion of the page.

    Code:
    <STYLE >
    
    @font-face {
    
    font-family: fontname;
    
    font-style: italic;
    
    font-weight: normal;
    
    src: url(fontname.eot); }
    
    </STYLE>
    Being a web purist I would advise against this, the web accessible fonts were chosen for a reason! Because they are very Readable and scale up and down well. Stick with fonts that users are sure to have. Plus currently, as far as I'm aware only Safari 3.1 and Firefox 3 support the feature with Opera's version in development.

    Its the only way to fully ensure accessibility and usuability. If you really want a fancy font for sub heading etc etc you can make an image with a good 'alt' and 'title' attribute, although again this is not ideal.

    Plus there is the ethical issue of having 'paid-for' fonts accessible from web directories. Its a pirating nightmare, which is probably why browsers have been so slow on the uptake and adoption of these techniques. It would be a legal nightmare should anyone kick up a stink about it all.

    Hope this helps
    Neron-Fx
    Everytime a user opens Internet Explorer, a web developer dies...
    http://www.savethedevelopers.org/

  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)
    Another aspect: don't assume that every visitor will want fonts installed on their computers.
    Birnam wood is come to Dunsinane

  5. #5
    Django Jedi neron-fx's Avatar
    Join Date
    Sep 2007
    Location
    Bristol/Bath, UK
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good point AutisticCuckoo,

    I get annoyed when sites expect me to install any plugins let alone fonts as well! That would do my head in. I groan when a site tells me to upgrade my flash player
    Neron-Fx
    Everytime a user opens Internet Explorer, a web developer dies...
    http://www.savethedevelopers.org/

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hope that when Opera implements support for @font-face they will include an option to disable it.
    Birnam wood is come to Dunsinane

  7. #7
    Django Jedi neron-fx's Avatar
    Join Date
    Sep 2007
    Location
    Bristol/Bath, UK
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah, that will be getting turned straight off!!
    Neron-Fx
    Everytime a user opens Internet Explorer, a web developer dies...
    http://www.savethedevelopers.org/

  8. #8
    SitePoint Enthusiast irish-ed's Avatar
    Join Date
    Oct 2007
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys - I suppose I should use only default fonts for content. It is strange though that for all the fonts out there for free and for sale, the only real way display them on your site is via images.

  9. #9
    Internet Toughguy Kevin Boss's Avatar
    Join Date
    Nov 2004
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  10. #10
    Django Jedi neron-fx's Avatar
    Join Date
    Sep 2007
    Location
    Bristol/Bath, UK
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah I agree, but that is the nature of the game. The nets primary purpose is to provide information and good valid content. By hampering users into having fonts installed or access to additional plugins goes against that very simple rule and I personally think should be avoided.

    Fancy fonts and wacky layouts are for print and other media. Dont get me wrong, I'm primarily a developer but I also have a keen eye for design and love working with Photoshop and Illustrator. I too sometimes wish the web could be more pretty, BUT I think you can provide a nice design even if simple which looks good and does not hamper users or diminish accessibility or usability... I do believe that the bottom line is CONTENT IS KING!
    Neron-Fx
    Everytime a user opens Internet Explorer, a web developer dies...
    http://www.savethedevelopers.org/

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,826
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You can always suggest the fancier fonts in your CSS so that those that have them installed will see the page in that font while those that don't will see the page in your second or third choice of font.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  12. #12
    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 felgall View Post
    You can always suggest the fancier fonts in your CSS so that those that have them installed will see the page in that font while those that don't will see the page in your second or third choice of font.
    That's the way to go, I think. If you're using fonts that are free for distribution, you can even offer them on your page for download so your page will "display properly," but that's going a bit overboard. You're right about the plethora of excellent fonts out there that we can't use because of the problem you cite. As of now, there's no good solution.

    Me, I'm still trying to find a free, legitimate copy of Helvetica Thin for myself.

  13. #13
    SitePoint Zealot
    Join Date
    Aug 2008
    Location
    NC
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As others have said, the semantic web is all about separating form from content. You really want to make sure that your content is accessible even if users don't have the proper fonts or plugins or whatever...

  14. #14
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,826
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Some people will be listening to your page instead of viiewing it or will be reading it in braille. In those instances font is irrelevant anyway.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  15. #15
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what about sIFR? as long as i know it works, but how recommended it is?
    - Inelastica.com | Cultura Grafica (spanish design blog)

  16. #16
    SitePoint Zealot
    Join Date
    Aug 2008
    Location
    NC
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sIFR looks pretty nice. I haven't used it yet, mainly because I just don't think fonts are that important. If I have something that I really need in a specific font, then I turn it into a graphic.


Tags for this Thread

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
  •