SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    @font-face source?

    I have read several @font threads in the forum googled around for this piece of info, but I am not having any luck. Maybe it's just not that important to actual functionality , but i want to know:

    [PRE]
    @font-face {
    font-family: "AndaleMono";
    src: url( "AndaleMono.eot" );
    src: local( "Andale Mono"),
    url( "AndaleMono.woff" ) format( "woff" ),
    url( "AndaleMono.ttf" ) format( "truetype" ),
    url( "AndaleMono.svg#AndaleMono" ) format( "svg" );
    }
    [/PRE]

    what is the function of "src: local( "...")"?
    If src:local points to an installed font in the USER's system.. why would it need to even be listed..isnt it already part of the normal CSS font stack?


    Also:
    In the above code, from what I have read, the first src:url(...) serves an otf font to IE browsers, the URLs in the second scr:s are ignored by IE serve font to all other browsers.
    But why the different formats??
    Once you have served a non IE browser a TTFont what is the use of also providing it with an SVG?


    thanks again for sharing your wisdom
    ==

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    what is the function of "src: local
    to look first for the font on your visitor's own computer and if it is there to not bother downloading any of the following versions.


    Quote Originally Posted by dresden_phoenix View Post
    But why the different formats??

    woff is actually the standard format for embedded fonts but few browsers support it yet.
    ttf is supported by most browsers apart from IE, iPhone, and iPad
    svg is necessary to support iPhone and iPad
    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="^$">

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I think Paul Irish's article explains all these points in some detail.

    http://paulirish.com/2009/bulletproo...tation-syntax/

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Thanks Paul. I read those articles. What they dont answer for me is WHY?

    We server the EOT fonts first for IE, So IE doesnt make the server calls for the other unusable versions, but then doesn't that mean that browsers like Firefox, for example, are calling EOT font versions as well? In another words are we making allowances for IE performance while forgoing the effiency of other user agents?

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Some don't support all types of fonts, aka only IE supports .EOT files, while others such as FF support a different type
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    We server the EOT fonts first for IE, So IE doesnt make the server calls for the other unusable versions, but then doesn't that mean that browsers like Firefox, for example, are calling EOT font versions as well? In another words are we making allowances for IE performance while forgoing the effiency of other user agents?
    The last reference is the one closest to the content and so takes priority. By placing the EOT reference first it ensures that browsers that understand the second command will ignore the first one.

    IE doesn't understand the local reference in the second command and so is theonly browser that has to read past that command back to the first one that references the EOT file.

    CSS files are always processed from the bottom up because the last reference in the file where there are overlaps will be the one to be used.
    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="^$">

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Um Ok. I get that part. I am just curious if other browsers (other than IE) can understand:src: url( "AndaleMono.eot" );
    thus causing browsers other than IE to make multiple server requests/downloads for fonts they cant use...

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Um Ok. I get that part. I am just curious if other browsers (other than IE) can understand:src: url( "AndaleMono.eot" );
    thus causing browsers other than IE to make multiple server requests/downloads for fonts they cant use...
    No. EOT is a proprietary Microsoft format.
    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="^$">


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
  •