How to add some non standard font to website?

Question

Is there any way to add some custom font on website without using images, flash or some other graphics. For example, I was working on some wedding website, and I was found a lot of nice fonts for that subject, but I can't find the right way to add that font on the server, and how to include that font with css into the html. Is this possible to do without graphics?

Answer 1

I'm afraid graphics is your only option in this case.

Answer 2

Or you could try sIFR (http://http://www.mikeindustries.com/blog/sifr)

Edit: I know it uses flash, but only if available. If flash isn't available, it displays the original text in it's original (css) font.

Answer 3

FOund an interesting link here:

http://www.spoono.com/html/tutorials/tutorial.php?url=embeddingfonts

Answer 4

I've found that the easiest way to have non-standard fonts on a website is to use sIFR

It does involve the use of a Flash object that contains the font, but it degrades nicely to standard text / font if Flash is not installed.

The style is set in your CSS and Javascript set's up the flash replacement for your text.

Edit: (I still recommend using images for non-standard fonts as sIFR adds time to a project and can require maintenance).

Answer 5

This could be done via CSS 2.0 and should work in WebKit based browser. It is not really widely supported, though, I think.

<style type="text/css">
@font-face {
    font-family: "My Custom Font";
    src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
    font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>

Answer 6

It looks like it only works in Internet Explorer, but a quick Google search for "html embed fonts" yields http://www.spoono.com/html/tutorials/tutorial.php?id=19

If you want to stay platform-agnostic (and you should!) you'll have to use images, or else just use a standard font.

Answer 7

The technique that the W3C has recommended for do this is called "embedding" and is well described by the three articles here: Embedding Fonts. In my limited experiments, I have found this process error-prone and have had limited success in making it function in a multi-browser environment.

Answer 8

"Is there any way to add some custom font on website, without using ... flash"

Sure, use Silverlight.

:P

Answer 9

Safari and Internet Explorer both support the CSS @font-face rule, however they support two different embedded font types. Firefox is planning to support the same type as Apple some time soon. SVG can embed fonts but isn't that widely supported yet (without a plugin).

I think the most portable solution I've seen is to use a JavaScript function to replace headings etc. with an image generated and cached on the server with your font of choice -- that way you simply update the text and don't have to stuff around in Photoshop.

Answer 10

If you use ASP.NET its really easy to generate image based fonts without actually having to install (as in adding to the installed font base) fonts on the server by using:

  PrivateFontCollection pfont = new PrivateFontCollection();
  pfont.AddFontFile(filename);
  FontFamily ff = pfont.Families[0];

and then drawing with that font onto a Graphics

Answer 11

Did a bit of research and dug up this:

http://www.alistapart.com/articles/dynatext/

This technique uses images, but it appears to be "hands free". You write your text, and you let a few automated scripts do automated find-and-replace on the page for you on the fly.

Has some limitations, but probably one of the easier choises ( and more browser compatible ) than all the rest I've seen.

Answer 12

This article says it works with all 3 major browsers:

http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work

Here is a sample I got working:

http://brendanjerwin.com/test_font.html

More discussion: http://brendanjerwin.com/development/web/2009/03/03/embedding-fonts.html

Answer 13

Typeface.js and Cufon are two other interesting options. They are Javascript components that render special font data in JSON format (which you can convert from Truetype or OpenType formats on their web sites) via the new element in all newer browsers except IE and via VML in IE.

The main problem with both (as of now) is that selecting text does not work or at least works only quite awkwardly.

Still, very nice for headlines. Body text... I don't know.

And it's surprisingly fast.

Answer 14

See the following article for alternative methods:

http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/

I have only used Cufon. I have found it reliable and very easy to use so I've stuck with it.

Answer 15

thanks, Can I add Unicode font using font face. my Unicode have a extension .eot and It's not working is there any other way to add unicode.

Answer 16

I've tried it! wont work in IE, works in FF, Chrome and Safari.

Answer 17

Typeface.js JavaScript Way:

With typeface.js you can embed custom fonts in your web pages so you don't have to render text to images

Instead of creating images or using flash just to show your site's graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

http://typeface.neocracy.org/

Answer 18

nice post , this code works awesome :)

Answer 19

Monotype recently released a lot of their fonts along with a new system for using them on your web pages: http://www.webfonts.fonts.com/

Answer 20

Some fonts You can add via Google Web Fonts.

Technically, the fonts are hosted at Google and You link them in the HTML header. Then, You can use them freely in CSS with @font-face (read about it).

For example:

In HTML header

 <link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

Then in CSS

h1 { font-family: 'Droid Sans', arial, serif; }

---

The solution seems quite reliable (even Smashing Magazine uses it for an article title.). There are, however, not so many fonts available so far in Google Font Directory.

Answer 21

It totally worked. Very big thanks from me. And if someone knows that how to change the cursor on your webpages please contact me guys. The Article was nice and totally worked. Email me my answer at [email protected]