How to get non-standard font with effect in use of web site?

Question

Problem is, that I need to get non-standard font (not everyone has it on his computer) with effect (from Photoshop: Outer Glow) in web site. I can use Javascript (including jQuery) and CSS3 for it, but that font should be able to highlight like any text in web. Any solutions?

P.S. Font: Titillium.

Answer 1

you can use

1. Glowing font use jquery plugin jQuery Text Glow Effect

2. Embedding Titillium font

   @font-face {
   font-family: Titillium ;
   src: url( /location/of/font/Titillium.ttf ) format("truetype");
   }

   /* Then use it like you would any other font */
   .Titillium { font-family: Titillium , verdana, helvetica, sans-serif;
   }

Answer 2

Well it's simple enough, if you can choose not to support IE8 and below for the glow part.

Go to http://www.fontsquirrel.com/fonts/TitilliumText and download the @font-face kit that's provided there. Follow the instruction on how to install and use @font-face for your website.

Next, for outer glow, you can use the text-shadow property to achieve pretty much the same effect. This, for instance, will get you a blue glow of size 3px:

text-shadow: 0 0 3px #7FDEFF;

And you're done! Of course, as stated above, IE8 and below don't support text-shadow, so you'll just have to live with that.

Answer 3

Try Cufon http://github.com/sorccu/cufon/wiki/usage

Something that I personally like about this is that it downgrades gracefully for those with js disabled in the way you want.

Answer 4

My proposition:

• on the first layer (above) use text with @font-face (use EOT file in IE, WOFF file in other browsers)
• on the second layer (below) use Cufon text in color of glow - it will change text to canvas
• after transformation just fast blur the generated canvas (e.g. by Pixastic library)

Second and third point can be replaced by putting image of glowing text (could be generated dynamicly, e.g. by PHP).

Seems complicated, it's only alternative. (Honestly, I like @Yi Jiang's answer).

Answer 5

To be able to display Titillium font like anyother text, you need to embed the font in the webpage. There are many online services that can help you do that. Before embedding make sure that the license of the font allows you to embed the font, as few font doesn't allow.

Here is an example for font embedding using CSS3:

@font-face{
    font-family: 'Titillium';
    src: url('Titillium.eot');
    src: local('Titillium'), url('Titillium.ttf') format('truetype'), url('Titillium.woff') format('woff'), url('Titillium.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

As you see above there are various formats of same fonts I have put. They are there to be browser compatible eg: eot is supported by Internet Explorer. WOFF is a format soon to be widely accepted by all the browsers. There are many online converter available for converting a font. You can google it out choose a best one for yourself.

Also font embedding is supported in following browsers:

• Mozilla Firefox: version: 3.5+
• Google Chrome: version 4.249.4+
• Apple Safari: version 3.1+
• Opera: version 10.5+
• Microsoft Internet Explorer: version 4+

Here is the glow effect I always use in my projects :)

HTML

<span id="glow">Hello World</span>

CSS

#glow{
    font-weight:bold;
    text-shadow:0 1px 0 rgba(255, 255, 255, 0.6), 0 0 10px rgba(73, 167, 219, 0.5), 0 0 30px rgba(92, 214, 255, 0.7), 0 0 75px rgba(92, 214, 255, 0.8);
}