CODEWITHSUNDEEP
androidgoogle-chromewebview
punksta
punksta

Reputation: 2818

android "font has been blocked"

I want to use ttf font from web in android, but got error while loading.

Html of web page:

<meta charset="utf-8" />
<style type="text/css">@font-face {
    font-family: pfbulletinsanspro-light; /* Гарнитура шрифта */
    src: url(https://s3.amazonaws.com/extrashop.images/demo/olymp/pfbulletinsanspro-light.ttf); /* Путь к файлу со шрифтом */
   }
   div {
    font-family: pfbulletinsanspro-light;
   }
</style>
<div><span style="font-size:26px;">Тестовая страница<br />
Съешьте еще этих мягких французских булок</span></div>

Android code :

    webView = (WebView) res.findViewById(R.id.webView);
    webView.requestFocus(View.FOCUS_DOWN);
    webView.setWebViewClient(new LoadLinkWebViewClient());

    webView.setWebChromeClient(new WebChromeClient());
    webView.getSettings().setJavaScriptEnabled(true);
    webView.loadUrl(url, new HashMap<String, String>() {
            {
                put("Access-Control-Allow-Origin","*");
            }
        });

I got error from chromium

"Font from origin 'https://s3.amazonaws.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' base url of my site ' is therefore not allowed access.", source: 'url of page'

Upvotes: 0

Views: 273

Answers (1)

PacQ
PacQ

Reputation: 334

You can't refer to a font located on 3rd party domains, because of security reasons. You should download the font and put it into the "assets" folder in your project and refer from there

src: url('../fonts/pfbulletinsanspro-light.ttf');

Or download an inject programmatically.

Upvotes: 1

Related Questions