iOS custom font path for UIWebViews

Question

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) folder I have "Nosifer-Regular.ttf"... To use the custom font in my HTML I need the path (URL) to the font tile... I tried doing this, but it didn't seem to work... any ideas?

bundle = [NSBundle mainBundle];
    pathFont = [bundle bundlePath];
    fontURL = [NSBundle pathForResource:@"Nosifer-Regular" ofType:@"ttf" inDirectory:pathFont];
    path_font = [fontURL stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
    fileAppend = [[NSString alloc] initWithFormat:@"file://"];
    path_font = [[NSString alloc] initWithFormat:@"%@%@", fileAppend, path_font];

The HTML (CSS):

@font-face {
  font-family: 'Nosifer';
  font-style: normal;
  font-weight: 400;
  src: local('Nosifer'), local('Nosifer-Regular'), url('%@') format('truetype');
}

Where %@ is replaced with "path_font" (defined above in the first code block)

This looks like a great answer, but I can't seem to get it working - no matter what I do, my custom font (embedded as a resource) is not used. Could you post a working code sample that shows a working version of this? The extended comments in the accepted answer seem to contain the solution (like using " instead of ', but I'm not sure where). — MusiGenesis, May 19 '12 at 21:02
Are you loading your content from your app bundle? Make sure the `baseURL` parameter you pass when you create your URL points to your app's resources folder. — nielsbot, Mar 20 '13 at 23:54
@nielsbot Thanks! The only problem was that in a UIWebView in iOS CSS required double quotes around a font type, single quotes do not work... this has nothing to do with CSS (in _REAL_ CSS either one will work) but the way Apple programmed the UIWebViews for some reason it doesn't work... I switched my single quotes to double quotes and the code in the accepted answer (below) worked fine. — Albert Renshaw, Mar 20 '13 at 23:57
@AlbertRenshaw, hy, I'm trying to do almost the same, but had no luck, do you think you can take a look at my question: https://stackoverflow.com/questions/50444788/ebooks-reader-not-capturing-embedded-font-for-epub-file — coder, Jun 04 '18 at 10:26

score 4 · Accepted Answer · edited Mar 20 '13 at 23:50

4

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.

edited Mar 20 '13 at 23:50

Chris Barr

29,851
23
95
135

answered Jan 26 '12 at 05:50

Pavel Oganesyan

6,774
4
46
84

I was using font-face but what do I put for the URL? I tried just typing myFont.otf (in my case "Nosifer-Regular.ttf") and it didn't load a font it just ran the default font. So then I tried retrieving the URL to the font file with the code above. I added the fonts provided to the info plist and tried both again and still no luck /: – Albert Renshaw Jan 26 '12 at 05:56
1

Do you copy your fonts from bundle to the same directory with the HTML? – Pavel Oganesyan Jan 26 '12 at 05:59
I'm saving my HTML in this directory docsDir = [NSHomeDirectory() stringByAppendingPathComponent:@"Documents"]; And I NSLOGGED the location of the font files and they are here: file:///var/mobile/Applications/************/****.app/AlmonteSnow.ttf – Albert Renshaw Jan 26 '12 at 06:05
So I guess I need to place the font files in the same place as docsDir, how can I do that manually? – Albert Renshaw Jan 26 '12 at 06:06
1

`[[NSFileManager defaultManager] copyItemAtPath:src toPath:dst error:&error;` – Pavel Oganesyan Jan 26 '12 at 06:40
And where you have src I would put "path_font"? This thing: "file:///var/mobile/Applications/************/****.app/AlmonteSnow.ttf" Now what is "dst? would I put docsDir? – Albert Renshaw Jan 26 '12 at 06:44
'src' is source, yes, it's path to your bundle resources. And 'dst' is destination, docsDir in your example. – Pavel Oganesyan Jan 26 '12 at 06:53
Hmmm /: I tried this, it isn't seeming to work: [[NSFileManager defaultManager] copyItemAtPath:path_font toPath:[docsDir stringByAppendingPathComponent:@"Nosifer-Regular.ttf"] error:nil]; path_font = [[NSString alloc] initWithFormat:@"Nosifer-Regular.ttf"]; – Albert Renshaw Jan 26 '12 at 07:12
Also tried this: [[NSFileManager defaultManager] copyItemAtPath:path_font toPath:docsDir error:nil]; path_font = [[NSString alloc] initWithFormat:@"AlmonteSnow.ttf"]; And this: [[NSFileManager defaultManager] copyItemAtPath:fontURL toPath:docsDir error:nil]; path_font = [[NSString alloc] initWithFormat:@"AlmonteSnow.ttf"]; – Albert Renshaw Jan 26 '12 at 07:18
Okay I can't get that working but the font loads if the HTML file is in my bundle, if the HTML file is in my directories it doesn't load (even if the font file is in my directories)... So I need to copy my HTML file to my bundle from my directories then load it, that should work I'll try it tmrw! (2:30 am here!) Thanks for all the help so far I'll let you know how it goes! – Albert Renshaw Jan 26 '12 at 07:30
"So I need to copy my HTML file to my bundle from my directories then load it" - you can't do it. `path_font = [[NSString alloc] initWithFormat:@"AlmonteSnow.ttf"];` - is wrong, should be `path_font = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"AlmonteSnow.ttf"]` – Pavel Oganesyan Jan 26 '12 at 07:38
This isn't working: `docsDir = [NSHomeDirectory() stringByAppendingPathComponent:@"Documents"];` `NSString *path2 = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"Nosifer-Regular.ttf"];` `[[NSFileManager defaultManager] copyItemAtPath:path2 toPath:docsDir error:nil];` – Albert Renshaw Jan 26 '12 at 22:12
1

Here is the HTML code I am saving then loading into a WebView: `
Insert Text Here
` – Albert Renshaw Jan 26 '12 at 22:17
AHHHH As it turns out we didn't have to do any of that copying stuff! The path I was using gave the right path and the html will read that, my problem was I was using single quotes ' for the CSS style tag (as to fit it in an NSString) and it requires double quotes " (I changed those to /" instead of ' and it worked fine!) – Albert Renshaw Jan 26 '12 at 23:34
^ in that code you don't need any of the margin, or body styles I added. that was so it would fit in my app, it may make it look weird in your app! haha! Thanks for helping me anyways! Much appreciated! – Albert Renshaw Jan 28 '12 at 14:15

score 1 · Answer 2 · answered Aug 29 '12 at 06:36

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.

That should work fine in HTML... the problem here was that I was trying to run it within my own UIWebView on iOS so the "url" section in the CSS has to use double quotes not single quotes so I replaced url('....') with url(\"...\") Again this only happens on iOS... your code will work fine for just a normal website browsing. — Albert Renshaw, Aug 30 '12 at 21:11
I used this code in iOS. Just put it in a html file, add the file to the bundle, then load the file into a NSString... something like [[NSString alloc] initWithContentsOfFile ... It worked, although for my needs I found out a better way to use this with UILabel. Generally though text handling on iOS really is weak :-( — Jonny, Aug 31 '12 at 01:12
Hmm, what version were you using? For whatever reason it would just NOT work for me when I originally posted this question! hmmm :) Haha — Albert Renshaw, Aug 31 '12 at 03:45

score 1 · Answer 3 · answered Oct 20 '14 at 15:26

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.

score 0 · Answer 4 · edited May 23 '17 at 10:26

0

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.

edited May 23 '17 at 10:26

Community

1
1

answered Jan 26 '12 at 05:52

metatation

167
6

iOS custom font path for UIWebViews

4 Answers4

Linked