how to use custom font in html pages for UIWebView

Question

I am having the "Futura.ttf" font file. I am displaying a HTML page in the UIWebView, but my requirement is that i want to use the custom font in my css file.

so is there any way that i can use the custom font in my css file ???

All suggestions are welcomed.

Thanks.

Answer 1

It is possible to load custom fonts into your UIWebView in iOS3.2 and above. Add the font to your bundle (see here) then just reference the font in your UIWebView's stylesheet like you would any other font:

<style type='text/css'>font { font-family: DroidSerif; } </style>

Answer 2

You have Cufon and sIFR as your options.

Typeface.js is a pure JavaScript Replacement Cufon is a pure JavaScript Replacement sIFR is Flash and Java font implementation, FLIR JavaScript and PHP implementation

Some Comparisons

• http://thatguynamedandy.com/blog/text-replacement-comparison
• http://thinkclay.com/technology/cufon-sifr-flir
• http://aaronwinborn.com/blogs/aaron/cufón-alternative-sifr-image-replacement

Below is taken from this question Worth reading the whole thread, has greatdetails.

Typeface.js

Advantages:

• User doesn’t have to have Flash plugin installed on their browser
• Easier to create with just a few lines of Javascript
• For page loading it just needs to load the Javascript

Disadvantages:

• Text is not selectable because it outputs it like an image. I looked at some examples, right clicked on a word and had to view as an image. Every single word had this behaviour. Big thumbs down.
• Usage for body copy will slow down loading time, so it is recommended to use only for headlines.
• Cannot be read by screen readers
• Visual looks blurry
• Not all browser compliant and still has a lot of development left to be done

sIFR

Advantages:

• Can be read by screen readers as a normal headline because it is a behaviour layer on top of the markup and styling.
• Text is selectable
• SEO friendly
• Displays text as is like any other web font. Crisp and not blurry!
• Has addons like jQuery sIFR Plugin!

Disadvantages:

• Requires Javascript to be enabled
• Flash plugin must be installed in the browser
• Need Adobe Flash Studio to create it BUT there is a pretty nifty sIFR generator that creates the file for you!
• For page loading, it has to request for Flash, Javascript and CSS files attached to it, which can potentially get bogged down if you are using sIFR in too many places.
• Cannot display on an iPhone. Yet…

Cufón (similar to Typeface.js)

Enter Cufón, the Javascript-based font replacement solution which makes heavy use of canvas and VML. This offers a great alternative to other solutions out there - no Flash or images required.

There are some issues with using Cufón on a live site, the most notable being the inability to highlight and copy/paste text, which is really the biggest issue for your site's users.

Combine that with the EULA issues, which prevent you from being able to legally embed fonts in Javascript files for most fonts on the market today.

The other issue is knowing what fonts can be used with Cufón. For sIFR, most fonts are fair game, since the font is embedded in a Flash movie, which is typically an approved usage by most font foundries for most fonts. With Cufón, the Javascript files used for the font can be easily "stolen" and either used on another website or reverse engineered.