/    Sign up×
Community /Pin to ProfileBookmark

using your own fonts

how can i use a font that is not the standard such as arial verdana, helvetica ect ect,

i see [URL=”http://www.moo.com/account/signout.php”]this site[/URL] does it on this page… i cant seem to work out how to do it though.

thanks in advance

to post a comment
CSS

5 Comments(s)

Copy linkTweet thisAlerts:
@LeeUJan 19.2007 — You can use it in a graphic, that's what they did. Otherwise, you would have to have the visitor download the specific font.
Copy linkTweet thisAlerts:
@felgallJan 19.2007 — If you want to see other people's web sites in the font of your choice then simply make sure that the font is installed on your computer and then add your own stylesheet to the browser to override the fonts defined by the web page. Any fonts defines in the stylesheet attached to a web page are merely suggestions and can easily be overridden by any of your visitors. If something must be displayed in a specific font then it can either be done as an image if it is only one or two words or as a PDF if you need to display large blocks of text in a specific font.
Copy linkTweet thisAlerts:
@bathurst_guyJan 21.2007 — No no no, don't use an image. Use [url=http://www.mikeindustries.com/sifr/]sIFR[/url]! sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash. Here is the entire process:
[list]
  • [*]A normal (X)HTML page is loaded into the browser.

  • [*]A javascript function is run which first checks that Flash is installed and then looks for whatever tags, ids, or classes you designate.

  • [*]If Flash isn't installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of your page measuring each element you've designated as something you'd like "sIFRed".

  • [*]Once measured, the script creates Flash movies of the same dimensions and overlays them on top of the original elements, pumping the original browser text in as a Flash variable.

  • [*]Actionscript inside of each Flash file then draws that text in your chosen typeface at a 6 point size and scales it up until it fits snugly inside the Flash movie.

  • [/list]
    This all happens in a split-second, so all of the checking, replacing, and scaling is not visible to the user. It is not uncommon to notice a very short delay as the Flash loads, but to the user, none of the internals of this process are exposed.[/quote]
    Copy linkTweet thisAlerts:
    @felgallJan 21.2007 — Of course if you use an image then the 98% of visitors with images enabled will see it.

    If you use Javascript and Flash then the 75% of visitors with both Javascript and Flash enabled will see it.

    Most flash that is currently around is badly written and takes forever to load so lots of people have it turned off. Using Flash just to display some text in a specific font is taking this to the extreme.

    Aslo to make your site accessible you need to have the text readable when all the visitor has is HTML and the CSS is disabled.
    Copy linkTweet thisAlerts:
    @CharlesJan 21.2007 — Of course, since nobody but you really cares about the fonts methods that fail for some or all of your users aren't really a problem. Two other methods to consider:
    [center]http://www.microsoft.com/typography/web/embedding/weft3/

    http://www.alistapart.com/articles/dynatext/[/center]
    ×

    Success!

    Help @popcop spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 5.16,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...