Getting the current system font

[andreszs]

Hi, is there some way to use the plugin to retrieve the current system font? I'd like my app to use the same font from the system, but it keeps using the default Android font similar to Arial instead of the user's selected font.

[eb1]

That sounds like a good enhancement!

I've got a question in to Stack Overflow to see if it's technically feasible. The Android API for the default typeface (Typeface.DEFAULT) doesn't appear to return the typeface name, which is a bit annoying. But there might be some other way the plugin can pass that value back up to Cordova apps. I'll update this once I get some answers back.

---

OTOH, if you're having problems setting a font and having it "stick" in your Cordova app, you can take a look at what I'm doing -- such as it is -- in my app that uses the cordova-fonts plugin: adapt-it-mobile. Gory details:

• in www/js/views/ProjectViews.js, the FontView class presents the list of fonts from the cordova-fonts plugin as an option list. Once the user selects a font name, it goes into the project settings.

• in www/js/views/AdaptViews.js, the addStyleRules() method (around line 130) inserts the user's font selections into the last stylesheet of the window.document.styleSheets[] array, using the sheet.insertRule() method. So the CSS rule ends up looking something like this:

  .myStyle { font: 10px "customFontName", helvetica, sans-serif; }

...where "customFontName" is the name of the font the user selected in ProjectViews.js. Then, when our editor page is displayed, the text is styled according to the appropriate font.

[andreszs]

Thanks, I also checked out that but with no avail because I don't know how to write plugins.

Also, I was unable to apply any of the installed fonts to my app, the font-family attribute is totally ignored, even when I put correct (installed) font names in my CSS (hard-coded), such as:

body{
  font-family: 'Droid Sans Mono';
}

Any ideas why I can't use those fonts? The phone is an Android 4.4.2 (KitKat).

[eb1]

No idea. Unfortunately, there are a lot of places where the font stuff can break down (any style in the style chain, a refresh in a bad place, etc.) Have you used the Chrome developer tools to see where the font definition is coming from?

I'm using a Lenovo tablet on 4.4.2 to test the Android stuff -- setting the font via CSS does seem to work on that device, so I know it can work. I know, it's not much help -- just a data point. :-/

[eb1]

Okay, the latest version of the plugin (0.6.5) should now contain an API to get at the default font for the device. Example code:

if (navigator.Fonts) {
  console.log("Fonts object in navigator");
  navigator.Fonts.getDefaultFont(
    function (defaultFont) {
        if (defaultFont) {
            console.log("Default Font: " + defaultFont);
        }
    },
    function (error) {
        console.log("DefaultFont error: " + error);
    }
  );
} else {
  console.log("Plugin error: Fonts plugin not found (is it installed?)");
}

For most Android devices, this will return the font string "Roboto Regular".