Why Punjabi (Indian Language) appears as boxes on some smart devices?

Question

I have released an app called Gurbani Ujagar. It appears to work fine on some smartphones like the Samsung Galaxy S3, but other phones such as the Galaxy Nexus, Galaxy S, and on some tablets, the words/characters appear to be as boxes or random punctuation. I have over 1000 HTML files which are being viewed using WebView.

I am not sure how I can fix this problem so the text appears exactly the same on all the phones. I have checked some other Punjabi apps on Galaxy Nexus and the Galaxy S, namely Dhur Ki Bani (which appears fine), but the Gurbani Ujagar app appears as boxes. I am not sure why that is. I tried editing the font in a HTML file.

Text does appear on the phones that didn't show up before I started editing, but some text still renders incorrectly.

Editing more than 1000 pages manually would be a lot of work. The HTML (not source code) files are in my assets folder. Is it possible to edit all the HTML files using Typeface? It seems like I can edit all of them at once in Xcode but I am not sure why.

Any help would be appreciated. Below is an example of my code:

You can also view the HTML file here.

public class MainActivity extends Activity {

@SuppressLint("SetJavaScriptEnabled")
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    WebView webview = (WebView) findViewById(R.id.webView1);
    webview.loadUrl("file:///android_asset/3.html");        
   }
}

Answer 1

Characters appear as boxes if the font you are using does not have glyphs for those characters (the font doesn't have those letters).

Some phones provide more fonts than others, and some phones may have more complete and newer versions of a font than others, meaning that some phones will have the font you selected and that font will have the characters you are using, while other versions of the same font on different phones or Android versions may not be as complete, and won't have the characters you use, so they will be displayed as boxes on those phones.

If you want to guarantee that your app will work and display all text on all phones, find a free font on Google Webfonts or Font Squirrel with a license that allows embedding in an app, and then ship that custom font with your app and use it in your HTML with CSS @font-face.