How to use a custom font inside a UIWebView

2
votes

I'm working on an iPhone application that use UIWebView which load xhtml files the html file could include css file that use custom fonts, but it's look like that the web view doesn't support custom fonts since it doesn't render the custom font in the css file

example: xhtml file:

<head>   
    <link href="../Styles/p1.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <p class="line1">تجريب</p>
</body>
</html>

css file:

@font-face {
font-family: "AHRAM";
font-style: normal;
font-weight: bold;
src:url("../Fonts/andlso.ttf");
} 

p.line1 {
font-family: "AHRAM";
}

any suggestion? thnx in advance :)

2
iphoneobjective-cuiwebviewcustom-font
Are you sure that the .tff-file is actually where you expect it do be? When your application is built all the files are copied into the application bundle. Have you tried loading an image in the css using the same relative path? – David Rönnqvist
yes image working right ... I don't think the problem with the path may be adding custom font doesn't supported but I don't know how to solve this problem – Muhammad Shaker
In your build phase, is the font being copied into the bundle? – David Rönnqvist
no my application is epub reader ... the application download book and unzip it to documents path then the web view load xhtml file from this path. – Muhammad Shaker
If you're trying to use a font file (in this case andlso.ttf) that your app downloads as part of a zipped "book", then I don't think that'll work—I think you'll have to bundle the font into your compiled app, and then use @TomSwift's advice below to put the font into use. (In other words, your app has to have all the custom fonts it intends to use built into the app at compile time.) – Scott Forbes

2 Answers

1
votes

Are you adding the font to your info.plist (UIAppFonts key) ?

Here's a tutorial for this process, which shows how to use the font in a UIWebView.

http://tetontech.wordpress.com/2010/09/03/using-custom-fonts-in-your-ios-application/

0
votes

After Setting up font to info.plist in above mentioned answer. Then copy - Paste the following code in your local html file:

<style>
    .heading1{font-family: "GurbaniAkharThick"}
    @font-face
       {
           font-family: 'GurbaniAkharThick';
           font-weight: 200;
           src: url(GurbaniAkharThick.ttf);
       }
    </style>
<div style = "font-family: 'GurbaniAkharThick'">AMimRq vyly dw jwp</div><br/>