Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using custom font in a UIWebView

I would like to display a custom font inside a UIWebView. I have already put the font in the plist under "Fonts provided by application". The code in use:

        UIWebView *webView = [[UIWebView alloc] initWithFrame:myRect];         NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];         [webView loadHTMLString:html baseURL:baseURL];         [self addSubview:webView]; 

where html is an NSString that has the following contents:

<html><head> <style type="text/css"> @font-face {     font-family: gotham_symbol;     src: local('GOTHAMboldSymbol_0.tff'), format('truetype')  }  body {   font-family: gotham_symbol; font-size: 50pt; } </style> </head><body leftmargin="0" topmargin="0"> This is <i>italic</i> and this is <b>bold</b> and this is some unicode: &#1101; </body></html> 

I'm using iOS 4.2 so TTF should be supported. I'd appreciate a bit of html/code that actually works.

like image 527
Joris Weimar Avatar asked May 07 '12 23:05

Joris Weimar


People also ask

Can you use custom fonts in CSS?

Nope, it isn't possible to style your text with a custom font embedded via CSS, while preventing people from downloading it. You need to use images, Flash, or the HTML5 Canvas, all of which aren't very practical.

How do I use custom fonts in Swift UI?

To use a custom font, add the font file that contains your licensed font to your app, and then apply the font to a text view or set it as a default font within a container view. SwiftUI's adaptive text display scales the font automtically using Dynamic Type.


2 Answers

After some Try and Error I have found a reliable way to load custom Fonts with a local CSS.

1. Add your Font to the App...make sure that the file is targeted properly to the Application

enter image description hereenter image description here

2. Then add your Font to yourApp-Info.plist

enter image description here

3. Run NSLog(@"Available fonts: %@", [UIFont familyNames]); To check which name the font/fontfamily has for the System...

enter image description here

4. Copy that name and use them in your CSS...@font-face is not needed

body {     font-family:"Liberation Serif"; } 
like image 154
Lindemann Avatar answered Sep 23 '22 09:09

Lindemann


I ended up making it work although I'm not sure what I did wrong above. Here's the HTML I use (NSString *htmll). I added everything, some of it might not be relevant for the solution.

<html><head><style type="text/css"> @font-face { font-family: 'gotham_symbol'; src: url('GOTHAMboldSymbols_0.ttf')  format('truetype')  } @font-face { font-family: 'gotham_symbol_italic'; src: url('GothamBoldItalic.ttf')  format('truetype')  } #w {display:table;} #c {display:table-cell; vertical-align:middle;} i { font-family: 'Helvetica-BoldOblique'; } </style></head><body topmargin="0" leftmargin="0"> <div style="display: table; width: 320px; height: 50px; #position: relative; overflow: hidden;"> <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;"> <div style=" #position: relative; #top: -50%"> <p style="font-size:20px;font-family:'gotham_symbol';color:#97371f;">THE TEXT GOES HERE</p></div></div></div></body></html> 

and I load the UIWebView as follows:

UIWebView *webView = [[UIWebView alloc] initWithFrame:rect]; [webView makeTransparent]; NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]]; [webView loadHTMLString:html baseURL:baseURL]; 
like image 23
Joris Weimar Avatar answered Sep 26 '22 09:09

Joris Weimar