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

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);
}