Question

我正在测试移动友好问题的页面我正在使页面变得易于移动，但搜索控制台会出错。我不知道为什么？

未捕获的ReferenceError：未定义WebFont

我在单击查看详细信息时测试页面时收到此错误，因为它显示了一些页面加载问题。我无法弄清楚这意味着什么？

Answer 1

您可以使用以下脚本异步加载网络字体。礼貌：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>

Answer 2

我遇到了类似的问题，并且解决了使用例如

嵌入字体的问题。

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

另外，根据字体优先级异步加载CSS也很重要。

例如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'">

未捕获的ReferenceError：未定义WebFont

2 个答案: