How to add some non-standard font to a website?

Question

Is there a way to add some custom font on a website without using images, Flash or some other graphics?

For example, I was working on a wedding website, and I found

Answer 1

The article Font-face in IE: Making Web Fonts Work says it works with all three major browsers.

Here is a sample I got working: http://brendanjerwin.com/test_font.html

More discussion is in Embedding Fonts.

Answer 2

Or you could try sIFR. I know it uses Flash, but only if available. If Flash isn't available, it displays the original text in its original (CSS) font.

Answer 3

The way to go is using the @font-face CSS declaration which allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers.

Take a look at the following table:

As you can see, there are several formats that you need to know about mainly due to cross-browser compatibility. The scenario in mobile devices isn't much different.

Solutions:

1 - Full browser compatibility

This is the method with the deepest support possible right now:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

2 - Most of the browser

Things are shifting heavily toward WOFF though, so you can probably get away with:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

3 - Only the latest browsers

Or even just WOFF.
You then use it like this:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

References and Further reading:

That's mainly what you need to know about implementing this feature. If you want to research more on the subject I'll encourage to take a look at the following resources. Most of what I put here is extracted from the following

• Using Font Face (Very recommended)
• Bulletproof @font-face syntax
• Can i use @font-face web fonts ?
• How to archive Cross-Browser @font-face support
• @font-face at the CSS Mozilla Developer Network

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 sets 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

If you have a file of your font, then you will need to add more formats of that font for other browsers.

For this purpose I use font generator like Fontsquirrel it provides all the font formats & its @font-face CSS, you will only need to just drag & drop it into your CSS file.

Answer 6

I did a bit of research and dug up Dynamic Text Replacement (published 2004-06-15).

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.

It has some limitations, but it is probably one of the easier choices (and more browser compatible) than all the rest I've seen.