Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 17

Thread: @font-face

  1. #1
    Senior Member DanExcell's Avatar
    Join Date
    Jul 2011
    Posts
    422
    Member #
    28663
    Liked
    76 times
    [COLOR=rgb(0, 0, 0)]font-sup-chart.png[/COLOR]

    [COLOR=rgb(20, 20, 20)]@font-face{ font-family: 'MyWebFont'; src: url('WebFont.eot'); src: url('WebFont.eot?iefix') format('eot'), url('WebFont.woff') format('woff'), url('WebFont.ttf') format('truetype'), url('WebFont.svg#webfont') format('svg'); }[/COLOR]

    [COLOR=rgb(20, 20, 20)]Example on how to add @font-face to your css file. The chart above displays browser support for font types.[/COLOR]
    [COLOR=rgb(20, 20, 20)]for more info, visit FontSpring or Font Squirrel.[/COLOR]

    [COLOR=rgb(20, 20, 20)][COLOR=rgb(20, 20, 20)]FYI[/COLOR][/COLOR]
    [COLOR=rgb(20, 20, 20)]if any one decides to use Museo700 (or fonts that are not very common) do not apply [/COLOR]
    [COLOR=rgb(20, 20, 20)]text-shadow: 1px 2px 3px #000;[/COLOR]
    [COLOR=rgb(20, 20, 20)]filter: dropshadow(color=#000, offx=3, offy=2);[/COLOR]
    [COLOR=rgb(20, 20, 20)]It will turn your text into chopped liver...[/COLOR]
    [COLOR=rgb(20, 20, 20)]Other than that @font-face works well.[/COLOR]

    [COLOR=rgb(20, 20, 20)]For more advance features or if you into issues with your font does not displaying correctly, look up [COLOR=rgb(0, 0, 0)]http://cufon.shoqolate.com/[/COLOR] (recommended by TheGame 1264)[/COLOR]
    George Dolidze likes this.
    I have gotten into the habit of not judging other designers/developers work, but this is my Microsoft Meandering time so I'm MEANDERING...

    Oh, almost forgot: spammers are gender-less parasites...

  2.  

  3. #2
    WDF Staff George Dolidze's Avatar
    Join Date
    Apr 2011
    Location
    Irvine, CA
    Posts
    2,487
    Member #
    27540
    Liked
    416 times
    Thank you for this, it explains my problem. The support is all over the place. Sheesh.
    My freelancer website: DolidzeDesign



    You only need a parachute if you plan on skydiving twice.

  4. #3
    Senior Member DanExcell's Avatar
    Join Date
    Jul 2011
    Posts
    422
    Member #
    28663
    Liked
    76 times
    Quote Originally Posted by George Dolidze, post: 215177
    Thank you for this, it explains my problem. The support is all over the place. Sheesh.
    I saw your thread earlier and decided to share.
    I have gotten into the habit of not judging other designers/developers work, but this is my Microsoft Meandering time so I'm MEANDERING...

    Oh, almost forgot: spammers are gender-less parasites...

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    A caveat that should be noted for font-face (and the reason I generally avoid it): different browsers will give you different results as far as anti-aliasing is concerned. IE with ClearType enabled will probably give you the style you want, as will Safari/Win (not sure about the Mac because friends don't let friends use Apple products). Firefox and Chrome won't anti-alias the font, however, so if you have a font that requires it (e.g. Gill Sans, NewsGothic), you're going to get some ugly, sharp edges. This would be a good idea if there was some sort of a CSS spec to be able to anti-alias the fonts the way the webmaster wants, but to the best of my knowledge no such beast exists (even in CSS3).

    This is why I prefer to go with a "safe" font such as Arial/Helvetica and then embed the font using Cufon or something for the JS users. You could use font-face as well for this, but again, you probably want to avoid the jagged edges.

    Just something to watch out for.
    George Dolidze likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Senior Member DanExcell's Avatar
    Join Date
    Jul 2011
    Posts
    422
    Member #
    28663
    Liked
    76 times
    Quote Originally Posted by TheGAME1264, post: 215206
    A caveat that should be noted for font-face (and the reason I generally avoid it): different browsers will give you different results as far as anti-aliasing is concerned. IE with ClearType enabled will probably give you the style you want, as will Safari/Win (not sure about the Mac because friends don't let friends use Apple products). Firefox and Chrome won't anti-alias the font, however, so if you have a font that requires it (e.g. Gill Sans, NewsGothic), you're going to get some ugly, sharp edges. This would be a good idea if there was some sort of a CSS spec to be able to anti-alias the fonts the way the webmaster wants, but to the best of my knowledge no such beast exists (even in CSS3).

    This is why I prefer to go with a "safe" font such as Arial/Helvetica and then embed the font using Cufon or something for the JS users. You could use font-face as well for this, but again, you probably want to avoid the jagged edges.

    Just something to watch out for.
    wow...
    I have gotten into the habit of not judging other designers/developers work, but this is my Microsoft Meandering time so I'm MEANDERING...

    Oh, almost forgot: spammers are gender-less parasites...

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Wow good, wow bad, wow "I never thought of that before", or wow different?
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  8. #7
    Senior Member DanExcell's Avatar
    Join Date
    Jul 2011
    Posts
    422
    Member #
    28663
    Liked
    76 times
    Quote Originally Posted by TheGAME1264, post: 215227
    Wow good, wow bad, wow "I never thought of that before", or wow different?
    Definitely different, feeling a bit funny about trying to help someone out now.
    I have gotten into the habit of not judging other designers/developers work, but this is my Microsoft Meandering time so I'm MEANDERING...

    Oh, almost forgot: spammers are gender-less parasites...

  9. #8
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    No harm, no foul, man. You meant well. It's something most people don't discuss about font-face, though. It's a good idea in principle, but it doesn't translate quite as well in practice, I've found.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  10. #9
    Banned
    Join Date
    May 2011
    Location
    Fairfax, CA
    Posts
    2,036
    Member #
    28003
    Liked
    126 times
    Quote Originally Posted by TheGAME1264
    friends don't let friends use Apple products
    Thank you

  11. #10
    Senior Member DanExcell's Avatar
    Join Date
    Jul 2011
    Posts
    422
    Member #
    28663
    Liked
    76 times
    I'm not sure about all of that, I have ran into the same problem with standard fonts before. At the end of the day, it all depends on the style of font you choose. Some parse well others don't - mostly the free ones. Furthermore, I have no desire to use Gills Sans or NewsGothic. The most likely instance of experiencing anti-alias issues is if you start doing minor CSS3 animations. As far as the non-existing spec you were referring to, it's already in the works.
    I have gotten into the habit of not judging other designers/developers work, but this is my Microsoft Meandering time so I'm MEANDERING...

    Oh, almost forgot: spammers are gender-less parasites...


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:47 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com