Geek Answers Handbook

How to get a custom font that affects website usage?

The problem is that I need to get a non-standard font (not all of it on my computer) with an effect (from Photoshop: Outer Glow) on the website. I can use Javascript (including jQuery) and CSS3 for it, but this font should be able to highlight like any text on the web. Any solutions?

PS Font: Titillium.

+1
source share
5 answers

To be able to display the Titillium font like any other text, you need to embed the font on the web page. There are many online services that can help you with this. Before deploying, make sure that the font license allows you to embed a font, since multiple fonts are not allowed.

Here is an example of embedding fonts 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 can see above, there are different formats for the same fonts that I put. They must be compatible with browsers, for example: eot is supported by Internet Explorer. WOFF is a format that will soon be widely accepted by all browsers. Many online converters are available for converting a font. You can do it yourself by choosing the best one for yourself.

Font embedding is supported in the 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 that 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); }
+3
source

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

Go to http://www.fontsquirrel.com/fonts/TitilliumText and download the @ font-face kit that is there. Follow the instructions to install and use @font-face for your site.

Further, for an external glow, you can use the text-shadow property to achieve almost the same effect. This, for example, will give you a 3px blue glow:

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

And you're done! Of course, as stated above, IE8 and below do not support text-shadow , so you just need to handle this.

+4
source

you can use

  • Glowing font use jquery plugin jQuery Text Glow Effect

  • Titillium font attachment

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

    / * Then use it like any other font * /
    . Titillium {font-family: Titillium, Verdana, Helvetica, Sans-serif,

    }

0
source

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

Something that I personally like about this is that it elegantly lowers for those whose js is disabled the way you want.

0
source

My suggestion:

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

The second and third points can be replaced by placing the image of the luminous text (can be generated dynamically, for example, PHP).

Seems complicated, this is just an alternative. (Honestly, I like @Yi Jiang's answer).

0
source

More articles:


All Articles