5

I am testing the the pages for mobile friendly issues I am getting the page a mobile friendly but search console gives errors. I don't know why?

Uncaught ReferenceError: WebFont is not defined

I am getting this error as I test the page when I click view details as it shows some page loading issues. I am not able to figure out what it means?

Krishna Prashatt
  • 631
  • 9
  • 18
saitama
  • 699
  • 1
  • 9
  • 21

2 Answers2

0

You can load the web fonts asynchronously using the script below. courtesy: https://usefulangle.com/post/259/load-google-fonts-javascript

<script>
    WebFontConfig = {
        google: {
            families: ['Roboto:300,400,700']
        }
    };

    (function(d) {
        var wf = d.createElement('script'), s = d.scripts[0];
        wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
        wf.async = true;
        s.parentNode.insertBefore(wf, s);
    })(document);
</script>
Faisal Abdul Rahiman
  • 188
  • 1
  • 7
-2

I had a similar problem and I solve embedding my font using e.g.: 

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

Also, is important to load the CSS Asynchronously depending on your Font priority.

e.g. Webfont Lora 400

<link href="https://fonts.googleapis.com/css?family=Lora:400&display=swap" rel="stylesheet" media="print" onload="if(media!='all') media='all'">
Thales M. Fukushima
  • 1
  • 1
  • 1
    It is better to describe what causes the issue along with sharing the fix. How you fixed the issue may not be as helpful to many others as knowing what causes it. – xenodevil Feb 18 '20 at 08:08