How to set FontFamily for a WebView with Downloadable Fonts?

Question

I currently refactored my app to use Downloadable Fonts hence I don't have any asset files for fonts. I have searched a lot and the only solution I see is to set the FontFamily in a CSS file and point the src to assets folder. This is not possible with downloadable fonts.

Finally I got the way. Details is here https://stackoverflow.com/questions/3900658/how-to-change-font-face-of-webview-in-android/57229260#57229260 — Afjalur Rahman Rana, Jul 27 '19 at 04:59
@AfjalurRahmanRana But that link doesn't have the solution for using Downloadable fonts in a WebView, Does it? — Maran Subburayan, Dec 14 '19 at 08:31
@MaranSubburayan yes, this link has the solution for using downloadable fonts in webview... Kindly follow the link and steps. If you find any difficulties please let me know. — Afjalur Rahman Rana, Dec 15 '19 at 20:56
@AfjalurRahmanRana No, If I understand the solution provided in this link correctly it uses Google web fonts ( not Android Downloadable fonts ) for WebView and woff is not supported by WebView in Android 4.x devices. — Maran Subburayan, Dec 16 '19 at 21:25

score 0 · Answer 1 · answered Dec 17 '19 at 07:47

When using Android Downloadable Font, You can get the URI of the ttf font file from the FontInfo.getUri() method.

FontsContractCompat.FontFamilyResult fontFamilyResult = FontsContractCompat.fetchFonts(view.getContext(), null, fontRequest);
Uri fontUri = fontFamilyResult.getFonts()[0].getUri();

You can use this URI to cache the ttf file in your app space which you can directly refer in WebView HTML and other places.

If you want to use the URI model instead, note that you can't directly use the URI returned by FontsContractCompat because it may violate CORS policy due to different base domains of the loaded content and this URI. You can use a custom URI pattern in the WebView HTML and intercept that request in WebViewClient's shouldInterceptRequest method where you can return an InputStream ( wrapped as WebResourceResponse ) from the URI returned by FontsContractCompat query or locally cached font file.

form the URI in css like this ( requires setting myappscheme://com.myapp.demo as base url of your content )

@font-face {
  font-family: Roboto;
  src: url('myappscheme://com.myapp.demo/fonts/name=Roboto');
}

and in WebViewClient. this is just a demo code snippet. so throw in some error handling here

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request)
    {
        Uri requestUri = request.getUrl();
        if (requestUri.getScheme()
                      .equals("myappscheme") && requestUri.getPath()
                                                          .startsWith("fonts"))
        {
            Context context = view.getContext();
            File fontFile = new File(context.getExternalCacheDir(), requestUri.getQueryParameter("name") + ".ttf");
            if (!fontFile.exists())
            {
                FontRequest fontRequest = new FontRequest(
                    "com.google.android.gms.fonts",
                    "com.google.android.gms",
                    requestUri.getQuery(),
                    R.array.com_google_android_gms_fonts_certs);

                FontsContractCompat.FontFamilyResult fontFamilyResult = FontsContractCompat.fetchFonts(view.getContext(), null, fontRequest);
                if (fontFamilyResult.getStatusCode() == FontsContractCompat.FontFamilyResult.STATUS_OK)
                {
                    InputStream gFont = context.getContentResolver()
                                               .openInputStream(fontFamilyResult.getFonts()[0].getUri());
                    fontFile.createNewFile();
                    ByteStreamsKt.copyTo(gFont, new FileOutputStream(fontFile), 4096);
                }
            }
            return new WebResourceResponse("application/octet-stream", null, new FileInputStream(fontFile));
        }
    }

How to set FontFamily for a WebView with Downloadable Fonts?

1 Answers1