How can i change the font family in phonegap

Question

I want to change font family in a phonegap project.

Means that user be able to change font family in the setting by select the arbitrary font.

How can i do it?

Thanks in Advance

---

Edit: Seems it doesn't work.this is my jquery code:

 $("#font-selector").change(function(){
       $(".size").css("font-family",$("#font-selector").val()); 

   });

And html code is:

<select name="changeFont" id="font-selector" onchange='$("body").attr("data-font", $("#font-selector").val())'>
<option value="my font">my font</option>
<option value="my font">my font</option>

And css code is:

@font-face {
font-family: 'my font';
src: url('my font.eot');
src: url('my font.eot?#iefix') format('embedded-opentype'),
     url('my font.woff2') format('woff2'),
     url('my font.woff') format('woff'),
     url('my font.ttf') format('truetype'),
     url('my font.svg#my font') format('svg');
font-weight: normal;
font-style: normal;

Where is the problem?

Answer 1

You can use this plugin to get a list of all fonts of your device:

cordova-plugin-fonts

Then you can show to the user a list, let them select one and after that you change the css of your site by javascript.

I'm not sure, but it could be, that you have to rerender the page after changing the font.

Answer 2

Seems something you could easily do with javascript/css.

Just ship your fonts in the app, to make sure they are available on any platform, and add a listener to your select which changes a css class to the body.

This is the html code if you are using jQuery or Zepto syntax.

<select name="changeFont" id="font-selector"  onchange='$("body").attr("data-font", $("#font-selector").val())'>
    <option value="default">Default</option>
    <option value="arial">Arial</option>
    <option value="comic-sans">Comic Sans</option>
</select>

then in css

.mytext {
  font-family: helvetica, sans-serif;
}

[data-font=arial] .mytext {
  font-family: arial, sans-serif;
}

[data-font=comic-sans] .mytext {
  font-family: "comic sans", sans-serif;
}

For this to work, just make sure that you have correctly added your fonts. To make this right you could use FontSquirrel webfont generator to convert any font to a web font and generate the needed css for you.

I should add that I did not test this, so let me know if you find it's not working.

---

Or, if your app is designed to work only when the user has internet connection then there's an even quicker way to add a lot of fonts. There's a jQuery plugin that will do exactly that.