Discussion Forums  >  WebViews and HTML for Mobile

Replies: 1    Views: 145

farcat
buzztouch Evangelist
Profile
Posts: 1008
Reg: Jan 27, 2012
France
13,230
08/15/13 01:12 AM (10 years ago)

HTML custom font, solution

Hi guys, I was trying to make an app with a custom font all over and surprisingly the HTML was giving me issues. Normally for a website I would use @Font-face on the css along with a .ttf or .eot file but that doesn't work on an IOS device. What I had to do was to convert the font file from .ttf to .svg. Here is a converted: http://www.freefontconverter.com/ So if you want a custom font on your html this is what you do: 1- drag your .svg file to your BT_Images folder 2- use this in your CSS: @font-face { font-family: 'RegencieLight'; src: url('RegencieLight.ttf'); src: local('RegencieLight'), local('RegencieLight'), url('RegencieLight.ttf') format('truetype'), url('RegencieLight.svg#font') format('svg'); } (This is an over-kill as this addresses cross browser issues but don't worry about that, it works) 3- Let the style sheet know which element you want to apply this font to: body { font-family: 'RegencieLight'; } Et voila! Farcat Sources: http://stackoverflow.com/questions/1149417/font-face-is-deprecated-on-the-iphone-version-of-safari-what-are-my-alternativ http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/ http://www.font-face.com/
 
SmugWimp
Smugger than thou...
Profile
Posts: 6316
Reg: Nov 07, 2012
Tamuning, GU
81,410
like
08/15/13 03:56 AM (10 years ago)
Very nicely done :) Cheers! -- Smug
 

Login + Screen Name Required to Post

pointerLogin to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.