I have a UIWebView and I have a custom font I want to load into an editable html document that I will be displaying through the UIWebView. In my SupportingFiles (resources)
Here is how you'd add the font to your Info.plist:
<key>UIAppFonts</key>
<array>
<string>Nosifer-Regular.ttf</string>
</array>
Then use @font-face as per this other answer.
First of all, add filed "Fonts provided by application" in your info.plist
. It will be an array like
item0 myFont.otf
item1 anotherFont.ttf
or something.
In HTML use font-face to add a font. And place your font files in the same directory with html file. If HTML is generated dynamically and not shown from bundle then you should copy font .
Good luck.
Add your custom font in your project. Then
Get font name
UIFont *font = [UIFont fontWithName:@"Your-Custom-font" size:20];
Then create html string
NSString *htmlHeader=[NSString stringWithFormat:@"<html><head><head><link rel=\"stylesheet\" type=\"text/css\" href=\"file://localhost%@\"></head><body><font face=\"%@\"; size=\"4\">HI</font></body></html>",cssPath,font.familyName];
Good luck.
I got a working html code example here.
<html>
<head>
<style type='text/css'>
p.p1 {margin: 0.0px 0.0px 0.0px 30.0px; font: 34.0px;}
@font-face {
font-family: 'Nosifer'; font-style: normal; font-weight: 400; src: local('Nosifer'), local('Nosifer-Regular'), url('Nosifer-Regular.ttf') format('truetype');
}
.nosifer {
font-family: Nosifer;
}
</style>
</head>
<body allowtransparency='true'>
<p class="nosifer">Nosifer ABCabc</p>
</body>
As you can see I used a css class to define the font more easily. I'm not sure what all that CSS code within font-face means, but it seems to work.
I confirmed that you NEED to add "Nosifer-Regular.ttf" to the array of fonts provided by the application in the *-info.plist file (key: Fonts provided by application). Btw I googled Nosifer-Regular.ttf and found it on a noisy site here. It really worked though: http://www.ffonts.net/Nosifer.font.download
Then, I was also able to load an OTF that I'll be using in my case. In the CSS I changed format from truetype to opentype.