?
Solved

Displaying font not installed on client

Posted on 2007-03-26
9
Medium Priority
?
257 Views
Last Modified: 2008-02-20
hi,
is there a way to use ttf file stored in  the website folder?
than you?
0
Comment
Question by:uk1900
  • 4
  • 2
  • 2
  • +1
9 Comments
 
LVL 11

Assisted Solution

by:JamesCssl
JamesCssl earned 2000 total points
ID: 18797666
It was possible in CSS/2, but then removed from CSS/2.1.  It is again possible in CSS/3, which isn't yet a recommendation.  Here is how to do it:

<style type="text/css">
@font-face {
    font-family: "Ace Crikey";
    src: url(ace.ttf);
}
.ace {
    font-family: "Ace Crikey";
    font-size: 230%;
}
</style>

It would be prudent to test it in several browsers and see which ones support it.
0
 
LVL 11

Expert Comment

by:JamesCssl
ID: 18797668
0
 
LVL 11

Expert Comment

by:JamesCssl
ID: 18797689
Basically, it's possible using a Microsoft solution that will work in IE only at this point in time.  That should cover about 75% or so of your visitors.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:uk1900
ID: 18798466
hi JamesCssl
I guess I am missing someting with your script,  what is the  Microsoft solution plz?
0
 
LVL 7

Expert Comment

by:Animasu
ID: 18798532
Just to add to what JamesCssl said, There is a way to do this but personally i wouldn't reccomened it, the amount of people using IE are slowly dropping and moving onto something like FF anyways, well... its what ive noticed whether this is for everyone or not i don't know(Depends on the user/site etc...)

I would stick with a font that people have installed allready on your computer and give a choice in your css (font-family: arial, "lucida console", sans-serif;) if the user dosn't have one it looks for the next, and so on. Also you can put off visitors with a random font which you think looks good but other people may thing ''it makes my eyes bleed''

Just keep in the back of your mind 'not everyone will see this font'

Hope this helps

- Animasu
0
 

Author Comment

by:uk1900
ID: 18798681
actualy the script of JamesCssl works with netscape browser but not with IE !
0
 
LVL 11

Accepted Solution

by:
JamesCssl earned 2000 total points
ID: 18800802
This is the example from the bottom of the page I referenced.  It requires transforming the ttf font to an eot font using some tools from microsoft.  It does in fact work in IE.

<style type="text/css">
    /* $WEFT -- Created by: francky on 03-09-06 -- */
@font-face {
    font-family: IE_ace;
    font-style: normal;
    font-weight: normal;
    src: url(acekrik0.eot);
}
.ie-ace {
    font-family: IE_ace, "Times New Roman", serif;
    font-size: 230%;
}
</style>
0
 
LVL 9

Expert Comment

by:pmagony
ID: 18802592
If you're using a special font for titles, why not just make them into images?

Or check out some image replacement solutions like:

Gilder/Levin method OR sIFR (Scalable Inman Flash Replacement) @ www.mikindustries.com/sifr

If you're looking to utilize a unique font throughout the entire site (including the body text), I'd recommend shying away from it.

Good Luck-
0
 
LVL 9

Expert Comment

by:pmagony
ID: 18802616
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses
Course of the Month13 days, 13 hours left to enroll

755 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question